HTML-2일차(CSS)
목차
01_hellocss.html
02_selector.html
03_selector_priority.html
04_font.html
05_alignment.html
06_text.html
07_layout_boxmodel.html
08_border.html
09_layout_display.html
(각 html별 css파일도 있음)
01_hellocss
태그에서 직접 스타일을 지정하는 것은 지양한다.
ex) <li style="color:coral">inline style 속성</li>
아래처럼 css 파일을 따로 만들면 사용/관리하는데 용이하다.
<link rel="stylesheet" href="css/01_hellocss.css">
02_selector
1.자식 , 후손 선택자
2.형제 선택자
3.가상 클래스 선택자
4.가상 요소 선택자
03_selector_priority(선택자 우선순위)
style 태그 내 작성보다 inline style 속성을 작성한 것이 우선순위가 높다
.css에서 !important를 작성하면 최우선 적용된다.(override 금지)
선택자 우선 순위 (빨간색은 지양, 3~5에서 사용할 것)
1.!important
2.inline style
3.id
4.클래스,속성,가상클래스
5.태그,가상요소 선택자
04_font
| serif | 글자 끝에 삐침이 있음 (궁서체와 비슷) |
| sans-serif | 글자 끝에 삐침이 없음 (고딕체와 비슷) |
| cursive | 필기체 |
| monospace | 글자 간격이 모두 동일한 폰트 |
web font
실제 개발환경과 클라이언트의 환경이 달라
폰트가 안보이거나 깨지는 현상이 발생하여 사용자에게 특정 font 제공
=>예전에는 개발자 환경에 존재했던 폰트가 사용자에게 없는 경우 사용자에게 온전한 기능을 제공할 수 없었다고함
글씨가 깨져서 안보인다거나 배치가 엉망이라거나..
web font 적용하는 방법
1.구글폰트에서 원하는 폰트를 찾는다.
https://fonts.google.com/?subset=korean
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
2.선택 후 오른쪽에서 use on the web 의 <link> 또는 @import 중 적용한다
<link> 적용방법
html 파일에 해당 링크 복사-붙여넣기.
@import 적용방법
css 파일 최상단에 링크 복사-붙여넣기
3.CSS rules to specify families를 css 파일에 적용.
#font3
{
font-family: 'East Sea Dokdo', sans-serif;
}
05_alignment(정렬)
| inline | block |
| 스스로 정렬 할 수 없다. (컨텐츠 크기로 결정되는거라 정렬할 여백이 없음) 부모 block요소의 text-align 속성으로 정렬한다. |
margin(다른 요소와의 여백)이라는 속성으로 정렬한다. |
| margin 사용법 왼쪽: margin-right: auto; (기본정렬,생략가능) 가운데: margin:0 auto; 오른쪽: margin-left: atuo; |
06_text
- 텍스트에 그림자 효과를 줄 수 있음
#sample{
/*block요소 하위 텍스트도 정렬됨*/
text-align: center;
text-decoration: underline 2px red wavy;
text-shadow: 3px 3px 7px red;
/* x-offset y-offset spread(번짐정도) color*/
}
07_layout_boxmodel
모든 태그는 boxmodel에 근거하여 화면에 랜더된다.
-content: 태그 하위 내용 영역(width,height)
-padding: content와 border 사이 여백
-border : 경계 영역
-margin : 다른 요소와의 여백
마진 겹침 현상
:마주하는 요소의 마진 값이 다른 경우, 마진 값이 큰 요소의 마진 값을 적용한다.
패딩 적용시..
top - right - bottom - left 순으로 값을 기입한다.
단, 마주보는 top-bottom / right-left는 서로의 값을 읽어서 사용할 수 있어서 생략 가능함.
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
padding: top, right, bottom, left;
padding: top, right, bottom (left는 맞은편인 right값을 이용)
padding: top, right (bottom은 top값을 읽어옴)
inline인 span
/*
span
-width:무시
-height:무시
-padding:적용
-margin:좌우만 가능
*/
/* 인라인인 span은 내용대로만 높이,너비를 지닐수있어서 특정 크기로 지정x */
.item span{
background-color: gold;
width: 100px;
height: 300px;
padding: 40px;
margin: 50px; /* 인라인은 위 아래는 적용이 안됨, 좌우만.*/
}
08_border
-item의 속성을 적용하여 이미지도 둥글게 만들 수 있고, 그림자 효과도 줄 수 있다.
.item{
margin:30px auto;
width:200px;
height:200px;
background-color: royalblue;
/* border-radius: 10px 20px 30px 40px; */
/*lt ,rt, rb, lb 순서*/
border-radius: 10%;
/* 50%가되면 원이됨 */
}
09_layout_display
| inline 요소 display:inline | block 요소 display:block |
| span, a, img... | hn, div, p, form |
block to inline
.d-inline{
display:inline;
}
inline to block
.d-block{
display:block;
}
둘의 특징을 섞은 하이브리드도 가능
.d-inline-block
{
display:inline-block;
}
| display:none | 차지하는 영역도 함께 제거 |
| visibility:hidden | 차지하는 영역은 남기고 제거 |
| opacity:0 | 차지하는 영역도 남기고 그 자리에 남아있음.(투명처리) |
1.수업내용 commit
2.블로그에 수업내용 기록
3.실습과제 하기