본문 바로가기

티스토리툴바

Pr Ae 2D Ai
UI UX(Web)

웹기초2- HTML, CSS를 활용한 프로토타입 (Onepage)

ongolzin 2022. 3. 18. 20:31

프로토타입 샘플모델

원페이지형식으로 위키백과와 유사한 단원아트 원페이지 스타일 홈피작업입니다.

기초적이지만 위키백과 스타일이란 주제를 원페이지형식으로 정하고 생소한 태그와 디자인 스타일이 나오지만, 앞부분 기초를 기반으로 하니 앞부분의 내용을 미리 볼 수 있는 기회겠죠.  

 

https://www.youtube.com/watch?v=Eiiysvcw7iQ&t=7s 

 

 

 

아래는 위 영상소개부분의 웹소스입니다.

프로토타입2_이몽룡.zip
1.99MB

 

<style type="text/css">

/*문서의 배색+배경이미지 처리 종합적이고 함축문법*/

 body{margin:90px;

background:#82b7ec url('imgs/bg_1300px.jpg') no-repeat center top;

/* 배경이미지 크기는 별도*/

  background-size:50%;

 }

 

/*머릿말1의 글씨크기와 상단과의 마진*/

 h1{color:red; font-size:64px; margin-top:100px}

 

 

/* 위로가기에  버튼스타일 메뉴화*/

.goTop{float:right; background:#000;padding:10px;text-decoration:none; color:#fff;} .goTop:hover{background:red;}

 

 

/* 스판태그로 어디서든 강조할 큰 글*/

 .big{ font-size:150%; font-weight:900}

 

 

/*인용문 디자인스타일*/

 q{margin:20px} /*크오우트 인용문 큰따움표 특징*/ 

 blockquote {background:cyan;}

 

 

 /*수평선의 깔끔한 좌우정리 디자인스타일*/

 hr{clear:both; margin:50px 0;}

 

/* 상단 ul에 클래스반영한 버튼스타일 메뉴화*/

.menu li{list-style:none; display:inline;}

.menu li a{text-decoration:none; padding:5px 20px; background:#ccc} 

.menu li a:hover{background:red; color:#fff}

.menu {margin-left: -40px}

</style>

 

 

배경에 대한 모든표현

 

매니저는 중복한 배경처리시 아래와 같은 함축된 CSS를 이용한다. 귀찮게 많을 것을 넣을 필요가 없을 때 아래 스타일을 추천한다.

 

body{margin:90px;

background:#ffeace url('imgs/bg_kart.jpg') no-repeat right bottom;

/* 배경이미지 크기는 별도*/

background-size:50%;

}

 

 

하지만, CSS의 정석적인 부분도 꼭 알아둬야한다. 아래는 CSS의 원칙적인 표현이다.

 

 

body{
배경색상
background: #cccccc; /* 배경색상과 그 이외에 다른 속성추가 가능 */
background-color: #cccccc; /* 배경색상 만 */
 
배경이미지
background-image: url("photographer.jpg"); /* 이미지파일의 경로 */
 
배경이미지 위치
background-position: center; /* Center the image */
 
배경이미지 반복
background-repeat: no-repeat; /* 반복없음 왼쪽상단 */
/* 반복 repeat, 수평반복 repeat-x, 수평반복 repeat-y  */
 
배경이미지 크기
background-size: auto; /* 원본이미지크기 */
background-size: 300px 10px; /* 사용자 임의 크기 */
background-size: 300px auto; /* 사용자 임의 크기, 높이는 자동 */
}
 
 
아래는 Body안에 Box Model형식의 Div에 적용해 멋져보이는 투명배색이 Alpha값(1.0~0.1:100%~10%)표현된 CSS의 원칙적인 표현이다.
 
div{
배경색상의 투명도(Red,Green,Blue,Alpha)
background: rgba(0,255,0,0.3); /* 배경색상과 투명도 배경이미지와 사용시 겹쳐짐*/
background-color: rgba(0,0,255,0.3); /* 배경색상 만 투명도 */
}
 
 
Color Picker #FFFFFF
Red, Green, Blue가 Full하게 보이면 White입니다.
Photoshop, Illustrator에서 색상을 뽑아내기 어려운 경우, 아래링크를 활용하세요. 
 
  • White : #ffffff 혹은 #fff
  • Black : #000000 혹은 #000
  • Red : #ff0000  혹은 #f00
  • Green: #00ff00  혹은 #0f0
  • Red : #0000ff  혹은 #00f
  • Red+Blue=Purple : #f0f
 
<!DOCTYPE html>
<html>
<style>
div{height: 400px;margin-bottom:50px}
.bgra1 {
    background: linear-gradient(to bottom, blue, yellow);
}
.bgra1_1 {
    background: linear-gradient(to top, blue 50px, yellow 150px);
}
.bgra2{
    background: linear-gradient(to bottom, #ebcaa0  50px, #ffeacf  150px);
}
</style>
<body>
 
<div class="bgra1"></div>
<div class="bgra1_1"></div>
<div class="bgra2"></div>
 
</body>
</html>

 

 

CSS display property

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

유튜브 튜토리얼 디자인 포토샵 작업물

web_cover_uk.psd
1.98MB
web_cover_uk_end.psd
6.90MB

추천사이트 

CSS로 만든 화려한 웹페이지가 많기 때문에 아이디어를 참고해보시면 좋을 것 같습니다.
https://www.awwwards.com/

저작자표시 비영리 변경금지

'UI UX(Web)' 카테고리의 다른 글

웹사이트 제작 1편 - 웹호스팅과 DB셋팅(그누보드5)  (0) 2022.04.08
[영상강좌목록] 디지털웹디자인 콘텐츠제작실무  (0) 2022.04.01
웹기초-01. 일반적인 웹문서와 스타일 기초  (0) 2022.03.16
HTML+CSS 고급 - 레이아웃 포지션과 시안 브라우저 테스트  (0) 2021.11.04
HTML+CSS 고급 - 레이아웃 좌/우배치 플롯과 한글 로렘입숨  (0) 2021.10.28

'UI UX(Web)' Related Articles


티스토리툴바