|

[HTML/CSS] 내가 보려고 만든 기초 핵심 내용정리

· 테크· Frontend
Frontend

1. CSS 적용 우선순위

 

① !important

1
2
3
4
5
div {
       color: red; 
       border: solid 5px blue; 
       background-color: #cce6ff !important;
}
 cs

 

② 해당 태그에 직접 준 것 → 인라인 방식

1
<div style="border: solid 1px red; background-color: #ffffcc; font-size: 40pt;">Hello, world</div>
 cs

 

③ HTML 파일에서 준 style 태그 → 임베디드 방식

1
<style type="text/css"></style>
 cs

 

④ 외부 css 파일

1
<link rel="stylesheet" href="mycss.css">
 cs

 

 

2. 태그의 display 방식

 

display 방식은 대표적으로 block 과 inline 방식이 있다.

block 방식 태그는

inline 방식 태그는

 

정해져있는 태그의 display 방식은 변경가능하며, block-inline 방식과 float 속성으로 변경가능하다.

전체 float 을 html 에 임베디드 방식으로 left 로 설정해두었다고 해도, css 우선순위에 따라 해당 태그에 close: left 를 인라인 방식으로 적용하면 그 태그부터 float 의 영향을 벗어난다.

(아래에 사진에서는 div2 태그에 close: left 를 적용)

 

 

3. 반응형 웹을 만들기 위한 너비설정

 

1
2
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
 cs

 

1
2
3
4
5
@media screen and (max-width:360px){
    hl {color: red;}
    ul {list-style-type: none;}
    li {display: inline;}
}
 cs

 

 

4. 태그의 display 방식

 

display 방식은 대표적으로 block 과 inline 방식이 있다.

block 방식 태그 : article, div, h1~h5, header, hr, table, footer, aside, p 등

inline 방식 태그 : a, input, span, select, img, label 등

- inline 은 width 및 height 적용이 안된다.

 

 

5. 시맨틱(Semantic) 태그

 

등 과 같은 Semantic 태그의 사용은 html 문서의 의미단위를 잘 전달할 수 있고, 따라서 코드 가독성을 높일 수 있다. 그리고 검색시 태그 의미에 따라 요소 스타일을 다르게 보여주기도 하기에 이런 Semantic 태그 사용은 검색엔진 최적화(SEO) 에 유리하다.

(→ 자세한 설명)

 

 

6. HTML Entities

 

 

7. line-height 와 vertical-align, text-align

 

inline 요소는 content-area 높이와 line-height 높이를 가지고 있다는 사실을 알아야 한다. 즉, 단순히 font-size 에 의해 line-height 가 결정되는 것이 아니라는 것이다. content-area 는 line-height 의 중앙에 위치한다. 

height 값이 auto이면 lihe-height가 사용되고, 이 때 content-area는 line-height와 같다.

 

margin 과 padding 의 변화는 아무런 영향을 미치지 않지만, display 가 line-block 방식인 경우의 padding, margin, border 는 높이를 증가시키므로 영향을 미친다.

(→ 자세한 설명과 출처)

 

css 에서 vertical-align 을 사용하고자 할 때, 적용되지 않는 경우가 있는데 바로 font 와 line-height 에 따라 달리 적용될 수 있기 때문이다. 기본적으로 font 마다 그리고 적용환경(브라우저 등)에 따라 content-area 의 변화가 생기는데 이 때, vertical-align 이 적용될 수 있는 충분한 인라인 박스가 제공되지 않는 경우를 고려해야 하기 때문이다.

vertical-align 은 인라인 요소에 적용되는 css 이다.

(→ 자세한 설명과 출처)

 

vertical-align 은 정렬의 기준이 세로지만. text-align 은 정렬의 기준이 가로이다.

vertical-align 의 경우 내용물이

태그 내에 있거나 display 방식이 외곽은 table, 내부 태그는 table-cell 로 설정한 경우에 적용된다는 것에 주의하자!

 

8.

 

태그 내에서 은 하위 태그를 하나의 그룹으로 묶어준다. 그리고 태그를 이용하면 내의 요소를 묶은 테두리의 상단 사이에 제목을 입력할 수 있게 한다. 즉, 아래의 w3school 의 그림과 같이 설정이 가능하다.

 

 

태그와 태그

input 의 id 값을 label 의 for 로 받아올 수 있다.

즉, autofocus 와 같이 label 동물의 종류 라는 단어를 선택하는 경우 태그에 커서가 가도록 할 수 있다. 

required 는 input 의 값을 선택해야만 submit 실행이 가능하게 한다.

autocomplete 는 자동완성 기능이다.

 

1
2
<label for="animal">동물의 종류 : </label>
<input type="text" id="animal" size="20" autofocus placeholder="포유류" required autocomplete="off" />
 cs

 

+

319 posts in 테크