Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

제뉴어리의 모든것

[Section1][Publishing] HTML, CSS 본문

코드스테이츠/정리 블로깅

[Section1][Publishing] HTML, CSS

제뉴어리맨 2022. 6. 27. 23:16

- HTML

  • HTML 이란?

HyperText Markup Language의 약자로 웹페이지의 내용의 구조(뼈대)가 되는 언어이다.

 

 

  • 시멘틱 태그란?

태그명에 의미를 부여한 태그이다.

기능적으로는 div와 동일하다.

사용 이유:

1. 개발자에게 직관적이기 때문에 유지보수에 용이

2. 시각장애인을 위한 스크린 리더기와 같은 환경에서 사용성 증가

3. 검색 엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색 결과의 노출에 유리할 수 있게 해준다.

 

출처 : https://stonefree.tistory.com/59

 

  • 블록 모델 VS 인라인 모델
    1. 블록 모델:
      - 컨텐트(내용)의 크기와는 상관없이 한 라인을 다 차지함
      - 한 요소가 한 라인을 다 차지 하기 때문에 블록요소들은 수직 방향으로 요소가 쌓인다
      - width, height 속성의 조절이 가능
      - 상하좌우 패딩, 마진 가질수 있음
      - 대표태그:
      div, p, h태그, aside, header, footer, form, ol, ul, li

    2. 인라인 모델:
      - 컨텐트(내용) 만큼의 크기를 차지함
      - 한 요소가 내용만큼만 차지하기 때문에 인라인 요소들은 수평 방향으로 요소가 쌓인다
      - width, hegith 속성의 조절이 불가능
      - 상하 마진 불가, 좌우 마진 가능, 상하좌우 패딩 가능
      - 대표태그:
      span, a, input, img, label


  • 블록 모델, 인라인 모델의 모델 바꾸기

block 요소를 inline 요소로, inline 요소를 block 요소로 변환이 가능하다.

그리고 block 요소와 inline 요소의 특징을 적절힌 섞은 inline-block 으로도 변환이 가능.

변환 방법 : 

display : block;

display : inline;

display : inline-block;

 

  • inline-block 요소란

block 요소처럼 width, height, 상하좌우 padding, margin 설정이 모두 가능하다.

그렇지만 inline처럼 컨텐츠 만큼의 기본 크기를 가지고, 그러므로 한 라인을 다 차지 하지 않는다.

그래서 inline-block 요소들은 수평방향으로 쌓인다.

내부적으로는 block 요소의 특징을 가졌지만, 외부적으로는 inline 의 특성을 가졌다.

대표 태그로는 button, select 가 있다.

 

 

  • HTML 기본 구조
<!DOCTYPE html>
<html lang="en"> 
<head>  <!-- 해당 문서의 메타 데이터들을 정의 -->
    <meta charset="UTF-8">  <!-- 해당 문서의 인코딩 정보 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> <!-- 해당 문서의 본문 내용 -->
    <header> <!-- 문서 혹은 특정 섹션의 머릿글 (해당 header는 body의 머릿글) -->

    </header>
    <div id="container"> <!-- 중심 내용을 보여주는 영역을 div 태그로 정의함 -->

    </div>
    <footer> <!-- 문서 혹은 특정 섹션의 아랫글 (저자, 연락처 등..) -->

    </footer>
</body>
</html>
  • 자주 사용하는 태그
    1. div, span
      단순히 영역을 나누기 위한 태그이다.
      div는 블록모델, span 모델이다.
    2. ul, ol, li
      ol : 순서 있는 리스트
      ul : 순서 없는 리스트
      li : ol, ul, 안에 각 항목들
    3. input
      사용자로부터 입력을 받을 수 있는 태그.
      type 으로 button, checkbox, radio 등등이 있다

    4. a
      링크를 걸 수 있는 태그

    5. h1 ~ h6
      제목을 나타내는 태그
      글자 크기가 커진다

    6. br
      줄바꿈 태그

    7. p
      문단을 나타내는 태그
      문단이므로 블록모델 태그

- CSS

  • CSS란?

HTML 태그에 꾸미기(스타일) 효과를 더해주는 Language

 

  • CSS 적용 방법
  1. Inline Style Sheet
    HTML 태그 요소에 직접 적용하는 방법
    <p style="color: blue">Lorem ipsum dolor.</p>

  2. Internal Style Sheet
    HTML 문서 <head> 부분에 <style> </style> 태그를 사용하여 적용하는 방법
    <style> 
        h1 { color: blue; } 
    </style>

  3. Linking Style Sheet
    별도의 CSS 파일을 만들고 <head> 부분에 <link> 태그를 사용하여 적용하는 방법
    <link rel="stylesheet" href="style.css">

 

  • 선택자 (Selector)
    1. class
    2. id
    3. 태그에 직접 적용
    4. 전체 셀렉터
      * {}
      문서내의 모든 요소를 선택 (head 포함)
    5. attribute 셀렉터
      a[href] : a 태그중 href 속성을 가진 요소 선택
      p[id="content"] : p 태그 중 id 속성의 값을 content로 가진 요소 선택
      p[id*="con"] : p 태그 중 id 속성의 값에 con이라는 값이 포함되는 요소 선택
      p[id$="con"] : p 태그 중 id 속성의 값이 con으로 끝나는 요소 선택
      p[id^="con"] : p 태그 중 id 속성의 값이 con으로 시작하는 요소 선택
      p[id|="con"] : p 태그 중 id 속성의 값이 con 이거나 con-으로 시작하는 요소 선택
      p[class~="con"] : p 태그 중 class 속성의 값에 con이라는 값이 포함되는 요소 선택 (class에 여러 선택자가 적용되어 있어도 con이 존재만 하면 선택)

    6. 후손 셀렉터
      header h1 {}
      header 후손중에 모든 h1 선택

    7. 자식 셀렉터
      header > p {}
      header의 자손(바로 하위에 요소들) 중 모든 p요소

    8. 인접 형제 셀렉터
      header + p {}
      header와 같은 부모를 가지며 바로 다음(인접)에 있는 p요소 하나만 선택

    9. 형제 셀렉터
      header ~ p {}
      header와 같은 부모를 가지는 요소 중 모든 p요소 선택

    10. 가상 클래스
      a:hover {} : a요소에 마우스를 갖다댔을때 
      a:active { } : a요소를 클릭한 상태
      a:focus { } : a요소를 클릭하여 선택이 되어진 상태 (클릭한 상태에서 드래그하여 다른곳으로 커서를 움직이면 재현 가능)
    11. 요소 상태 셀렉터
      input:checked + span { } : input 태그 중 체크된 요소의 인접형제인 span 선택

    12. 구조 가상 클래스 셀렉터
      p:first-child { } : 부모 요소로부터 첫번째 자식이면서 p인 요소 (부모가 같은 p태그이면 안됨)
      ul > li:last-child { } : ul 요소의 자식 요소들 중 마지막 자식이면서 li인 요소
      ul > li:nth-child(2n) { } : ul 요소의 자식 요소들 중 짝수번째 자식이면서 li인 요소
      section > p:nth-child(2n+1) { } : section 요소의 자식 요소들 중 홀수번째 자식이면서 p인 요소
      ul > li:first-child { } : ul 요소의 자식 요소들 중 첫번째 자식이면서 li인 요소
      li:last-child { } : 부모 요소로부터 마지막 자식이면서 li인 요소
      div > div:nth-child(4) { } : div 요소의 자식 요소들 중 4번째 자식이면서 div인 요소
      div:nth-last-child(2) { } : 부모 요소로부터 마지막에서 2번째인 div인 요소
      section > p:nth-last-child(2n + 1) { } : section 요소의 자식 요소이면서 마지막에서부터 홀수번째인 p요소 모두
      p:first-of-type { } : 부모 요소의 자식 요소들중 최초 등장하는 p요소 (첫번째 요소일 필요 없이 최초의 p요소)
      div:last-of-type { } : 부모 요소의 자식 요소들중 최초 등장하는 div요소 (첫번째 요소일 필요 없이 최초의 p요소)
      ul:nth-of-type(2) { } : 부모 요소의 자식 요소들 중에 2번째로 등장하는 ul 요소
      p:nth-last-of-type(1) { } : 부모 요소의 자식들 중에 존재하는 p타입의 요소들중 1번째 요소

    13. 부정 셀렉터
      input:not([type="password"]) { } : input 요소 중 type속성의 값이 password가 아닌 요소
    14. 정합성 셀렉터
      input[type="text"]:valid { } : input 요소 중 type이 text이고 요구 사항에 유효한 값을 넣은 요소
      ex : 

      :
      :

       <style>
              input[type="text"]:valid { 
                  background-color: green;
              }
       </style>
       
       :
       :
       :
       
        <input type="text" required> //요구사항이 required로 반드시 입력이 되야 한다는 의미. (required 없으면 무조건 유효하므로 스타일이 그냥 적용됨)
  • 주요한 css 속성
    1. color : 글자 색
    2. font-weight : 글자 두께
    3. font-family : 폰트
    4. background : 백그라운드 영역의 설정 요소를 한번 설정 가능 (모두 해줄 필요 x)
    5. font-size : 글자 크기
    6. text-decoration : 글자 꾸미기 (밑줄 등)
    7. letter-spacing : 자간 (글자간 간격)
    8. line-height : 줄 간격


  • BOX 모델의 개념

content : 내용

padding : content와 margin을 제외한 영역의 테두리간의 영역

border : content와 padding을 둘러싼 테두리

margin : border 영역 밖의 영역 (요소간의 여백)

 

  • box-sizing
    박스모델 요소의 크기를 설정할때에 기준이 되는 속성으로
    요소의 height, width를 설정할때 border를 기준으로 설정할지,
    content의 기준으로 설정할지에 대한 속성.

    border-box : height, width 값이 테두리에 적용됨
    content-box (기본값) : height, width 값이 content에 적용됨

 

 

 

  • 기타 사항
    z-index는 겹칠 경우에만 우선순위 조절해줌.
    겹치지 않으면 의미 없음

 

 

 

 

 

 

 

 

 

 

참조 사이트 : 

https://velog.io/@aepee/%EB%B8%94%EB%A1%9D-%EC%9A%94%EC%86%8C%EC%99%80-%EC%9D%B8%EB%9D%BC%EC%9D%B8-%EC%9A%94%EC%86%8C

 

 

블록 요소와 인라인 요소

블록 요소와 인라인 요소! 그리고 인라인-블록 요소

velog.io

https://aboooks.tistory.com/308

 

 

'코드스테이츠 > 정리 블로깅' 카테고리의 다른 글

[Section1][Linux] 기초 [추후 보완]  (0) 2022.06.30
[Section1][Publishing] HTML, CSS - 2 [추후 추가 정리 필요]  (0) 2022.06.30
[Section1][Development] 기초 - 2. 웹  (0) 2022.06.24
[Section1][Development] 기초 - 1. 컴퓨터 프로그래밍의 이해  (0) 2022.06.24
[Section1] Learn How To Learn  (0) 2022.06.23
'코드스테이츠/정리 블로깅' Related Articles more