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

1. CSS 적용 우선순위

 

① !important

div {
       color: red; 
       border: solid 5px blue; 
       background-color: #cce6ff !important;
}

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

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

 

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

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

 

④ 외부 css 파일

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

 

---

 

2. 태그의 display 방식

 

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

block 방식 태그는 <div> <h1> <h2> <h3> <h4> <h5>

inline 방식 태그는 <span> <label> 

 

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

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

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

 

---

 

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

 

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

 

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

 

---

 

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) 태그

 

<header> <article> <footer> <main> 등 과 같은 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 의 경우 내용물이 <table> 태그 내에 있거나 display 방식이 외곽은 table, 내부 태그는 table-cell 로 설정한 경우에 적용된다는 것에 주의하자!

---

 

8. <form>

 

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

 

 

<label> 태그와 <input> 태그

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

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

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

autocomplete 는 자동완성 기능이다.

 

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

 

+

<select> 태그에는 <option> 태그를 사용

<radio> 태그에는 name 값 설정해야 한다.

 

---

 

9.  <table> 태그

 

<table> 에서 기본 구성은 아래 코드와 같은데 여기서, colgroup span 을 이용하면, 열을 묶어서 css 처리를 할 수 있도록 해준다. 열이 5개라면, 첫번째 span 으로 2 값이 주어지고 다음에도 span 에 2 값이 주어질 때의 열은 table 상에서 3, 4번째 열을 의미한다.

 

<table>
    <colgroup span="2" id="firstgroup">
    <thead>
        <tr>
            <th>table 종류</th>
            <th>설명</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>thead 태그</td>        
            <td>테이블 열 제목을 나타내는 태그이다</td>
        </tr>
    </tbody>
</table>

 

+

<th> 나 <td> 태그에서 colspan, rowspan으로 각각 열병합, 행병합을 나타낸다.

<td> 태그에 각각의 id 나 class 값 지정 없이도 <td:first-child> <td:last-child> <td:nth-child(n)>과 같은 방식으로 하위 태그를 잡아줄 수 있다.

 

 

---

 

10. <img>, <audio>, <video>

 

<img alt="이미지 파일이 없습니다" src="image/a.jpg" width="100px" heigth="100px" />

 

alt 를 이용해서 이미지 파일이 없을 경우 등 사진을 대신할 문구를 작성할 수 있다.

이미지 테두리 속성의 변화를 주는 것은 border-radius 라는 속성이다. margin 처럼 각각의 방향에 px 또는 % 값으로 변형할 수 있다.

 

<audio src="audio/a.mp3" controls autoplay loop/>

 

audio 에서 controls 는 소리 조절, autoplay 는 자동재생, loop 는 반복재생을 의미한다.

 

video 태그도 audio 태그와 유사하나 동영상 삽입 태그로 browser support에 유의해서 사용하자. 그리고 HTML5 에서는 컨트롤도구 삽입이 불가하므로 controls 속성을 추가하는 것이 좋다.

 

---

 

11. position

 

각각의 css 엘리먼트 속성 값으로 position 을 줄 수 있는데 종류는 다음과 같다.

 

①  static positioning

position 을 주지 않았을 때의 기본값. top, down, left, right 값을 별도로 주지 않더라도  기본값이나 부모 태그의 속성을 따라 적용받는다.

 

②  absolute positioning

절대값을 갖는 것으로 주어진 값이 모니터 크기의 % 로 변환되며 부모의 속성을 따라가지 않는다.

 

③  relative positioning

상대적 위치 값으로 기준은 자신의 속성으로 positioning 값에 따라 변화된다. 즉, static positioning 의 값과 비교하여 상대적인 값의 변화가 생긴다.

 

④  fixed positioning

마우스 스크롤의 영향을 받지 않는 값으로 주로 웹페이지에서 상단으로 이동하는 버튼을 생성하는 등의 경우에 사용된다. 위치는 현재 보이는 모니터의 위치 값으로 사용자가 볼 때는 모니터 내에서 항상 같은 위치에 고정된다.

 

---

 

12. 상태에 따른 css 속성값

 

: link → 방문 전 링크 상태

: visited → 방문 후 링크 상태

: hover → 마우스 오버 했을 때 링크 상태

: active → 클릭했을 때 링크상태

 

---

 

13. overflow 

 

엘리먼트의 크기를 넘어가는 내용물을 어떻게 보일 것인지 설정하는 속성이다.

overflow: visible 은 내용물의 크기를 우선해서 다 보여주는 것

overflow: hidden 은 넘치는 내용물을 자르는 것

overflow: scroll 은 내용물이 넘치지 않더라도 무조건 스크롤바를 생성하는 것

overflow: auto 는 내용물이 넘칠 때만 스크롤바가 생기게 하는 것