웹표준인 HTML5+CSS3+JS 에서 CSS3 기초 개념을 정리해본다.2
CSS3 단위는 키워드/ 크기/ 색상/ URL
키워드 단위 : 키워드를 스타일 값으로 입력(자동적용, IDE에서는 자동으로 알려주기까지 한다.)
크기 단위((css3에서 가장 많이 사용하는 단위)
: %(백분율단위. 기본100%), em(배수단위. 1배=1em=100%), px(픽셀단위, p태그 기본속성=16px),...
색상단위 : rgb(red, green, blue 각0~255), rgba(red, green, blue, alpha(투명도0.0~1,0)), hex16진수 #00(r)00(g)00(b)
URL단위 : 이미지, 글꼴 파일 불러올 때 사용, background-image속성 사용(url경로 형태로 입력)
박스 속성
width와 height속성 : 글자를 감싸는 영역의 크기를 지정
boder 속성(boarder아님!!!) : 테두리의 두께를 지정
margin 속성 : 테두리와 다른 태그와의 간격을 지정
padding 속성 : 테두리와 글자 사이의 간격을 지정
테두리 속성
border-width 속성 : 테두리의 두께 지정, 크기 단위 또는 키워드 입력 가능
border-style 속성 : 테두리의 형태 지정, 키워드 입력 가능
border 속성 : border-width, border-style, border-color 속성 한 번에 입력 가능!
<style>
.box {
border: thick dashed black;
}
</style>* width와 height, margin과 padding 속성
전체 너비 = width+2x(margin+border+padding)
전체 높이 = height+2x(margin+border+padding)
border-radius 속성 : 테두리가 둥근 사각형, 원 생성 가능
display 속성
* 인라인 형식과 인라인 블록 형식 차이
인라인 키워드를 적용한 코드-> width와 height 속성이 지정되지 않고, margin 속성이 div태그의 좌우로만 적용
인라인-블럭 키워드를 적용한 코드-> width와 height 속성이 적용, margin 속성도 상하좌우로 적용
배경 속성
*배경 이미지를 두개 삽입시에는 먼저 입력한 이미지가 앞으로 나옴
+ background-repeat 속성 : repeat(이미지가 패턴을 이룸), repeat-x(X 축 방향으로만 이미지가 반복됨), repeat-y(Y 축 방향으로만 이미지가 반복됨), no-repeat(반복하지 않음)
+ background-attachment 속성 : scroll(기본 속성), fixed(스크롤 이동해도 배경이미지가 고정)
+ background-position 속성 : 아이콘(스프라이트 이미지)를 만들 때 자주 사용.) 크기 단위나 키워드를 입력
font-size 속성
: 글자 크기를 지정하는 속성, 크기 단위나 키워드를 입력
font-family 속성 : 글꼴을 지정하는 속성
font-family 속성을 여러 개 입력 : 사용자의 컴퓨터에 글꼴이 없는 경우를 대비
예시
<style>
.a { font-size: 32px; }
.b { font-size: 2em; }
.c { font-size: large; }
.d { font-size: small; }
.font_arial { font-family: Arial; }
.font_roman { font-family: 'Times New Roman'; }
.font { font-family: 'Times New Roman', Arial ; }
</style>
<body>
<h1>안녕하세요.</h1>
<p class="a">안녕하세요.</p>
<p class="b">안녕하세요.</p>
<p class="c">안녕하세요.</p>
<p class="d">안녕하세요.</p>
<h1 class="font_arial">Lorem ipsum</h1>
<p class="font_roman">Lorem ipsum</p>
<p class="font">Lorem ipsum</p>
</body>참고로!
웹 폰트 설정은 여기서! https://fonts.google.com/
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
예시
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Song+Myung&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Song Myung', serif;
}
</style>
<body>
<h1>안녕하세요.</h1>
<p>그들의 장비와 기구는 모두 살아 있다.</p>
<p>안녕하세요.</p>
</body>
font-style 속성 : 글자의 두께 조정
font-weight 속성 : 글자의 기울기 조정
font-align 속성 : 글자의 정렬을 지정
* text-align 스타일 속성과 영역 (span 태그는 인라인 형태이므로 너비가 존재X. 따라서 중앙이라는 개념 자체가
존재하지 않으므로 text-align 속성을 적용할 수 없음!
lint-height 속성 : 글자의 높이 지정, 글자를 수직 정렬할 때 사용(아래 그림에서 Click
위치 속성
* 요소의 위치를 설정하는 방법
절대 위치 좌표: 요소의 X 좌표와 Y 좌표를 설정해 절대 위치 지정
상대 위치 좌표: 요소를 입력한 순서에 따른 상대 위치 지정
position속성
absolute 속성 적용
left와 top 속성 적용
++z-index 속성 : 도형의 순서를 변경하고 싶을 경우 z-index 속성 사용(숫자가 클수록 앞에 위치!)
#box1 {
background-color: red;
left: 50px; top: 50px;
z-index: 999999999999999999;
}
#box2 {
background-color: green;
left: 100px; top: 100px;
z-index: 1000;
}
#box3 {
background-color: blue;
left: 150px; top: 150px;
z-index: 1;
}
overflow 속성 : 내부의 요소가 부모의 범위를 벗어날 때 요소를 처리하는 방법 지정
overflow-x : x방향으로 스크롤 생성, overflow-y : y방향으로 스크롤 생성
float 속성 : 레이아웃 구성(웹페이지를 만들 때 가장 많이 사용!!!), 수평정렬
예를들어 img 태그에 float 속성을 적용하면, 이미지와 글이 어우러진 형태로 출력됨
* 수평정렬 OneTruelayout 예제
<body>
<div id="header">
<img src="../mini1.jpg" height="40">
</div>
<div id="navi">NAVIGATION</div>
<div id="content">CONTENT</div>
<div id="aside">ASIDE</div>
<div id="footer">FOOTER</div>
</body>* { margin: 0;padding: 0; }
div { border: 1px solid blue; line-height: 20px; }
#header { width: 498px; height: 50px; }
#navi { width: 498px; height: 20px; }
#content {
/* 350 : 150 */
width: 348px; height: 100px;
background-color: antiquewhite;
float: left;
}
#aside {
/* 350 : 150 */
width: 148px; height: 50px;
background-color: aqua;
float: left;
}
#footer { clear: both; width: 498px; }
그림자 속성
아래 두개는 중첩도 가능
text-shadow 속성 : 글자에 그림자 부여 (근데 가독성 똥망이라 잘 안씀)
box-shadow 속성 : 박스에 그림자 부여
html+css3 최종 정리 과제! 다시 해보기!
<블로그 페이지 만들기>
'STUDY > web' 카테고리의 다른 글
| 웹 서버 아파치 톰캣 설치와 오류 해결방법 (0) | 2021.12.05 |
|---|---|
| [NCS 과제] 웹페이지 클론 코딩 (0) | 2021.11.19 |
| [CSS3] 선택자 기초 개념 정리 (0) | 2021.11.18 |
| [HTML5] 기초 학습 (0) | 2021.11.16 |
| [Oracle] 뷰 정리 (0) | 2021.11.08 |