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(선택자 우선순위)

https://velog.io/@sophia9901/CSS%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%83%81%EC%86%8DCascadingOverridingSelector

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

 

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;

 

 /* 가운데정렬[상하좌우] */

    display : flex;

    justify-content: center;

    align-items: center;

 

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.실습과제 하기