2022.08.23 화 - HTML, CSS

📄 학습내용

HTML

• 기본 구조와 문법
  • HTML : 태그<>의 집합, 웹페이지의 틀을 구성하는 마크업 언어(데이터 구조 표현하는 언어)
  • tree 구조
  • self-closing tag : <tag></tag> 대신 <tag />를 통해서 표현 가능
• HTML 요소(element)
  • <시작태그 속성(key-value, 이름="값"> 콘텐츠 <종료태그>
• 자주 사용되는 태그(tag)
  • <div></div> : 콘텐츠의 길이와 상관없이 한 줄을 차지한다.
  • <span></span> : 콘텐츠의 길이만큼 차지한다.
  • <img> : 이미지를 출력하는 태그
    
    • src 속성을 통해서 이미지의 주소를 넣어준다.
  • <a></a> : 링크 태그
    • href 속성을 통해서 이동할 페이지의 주소를 넣어준다.
    • target 속성과 "_blank" 값을 통해서 새로운 페이지에서 링크 이동한다.
  • <ul></ul> & <li></li> : unordered list와 list item으로 구성된 태그
  • <input> : 입력을 받는 태그
    • type="text" 속성의 경우, 문자를 입력받는다.
    • type="checkbox" 속성의 경우, 여러 개의 선택이 가능하다.
    • type="radio" 속성의 경우, 여러 개 중에 하나만 선택이 가능하다. 단 name 속성을 통해서 같은 그룹에 있을 때만 가능하다.
  • <textarea></textarea> : 여러 줄의 문자를 입력받는 태그
  • <button></button> : 버튼 태그
  • <p> VS <div>
    • <p> 태그 : 문장의 단락을 구분하기 위해서 사용
    • <div> 태그 : 영역을 구분하기 위해서 사용
  • <!-- --> : 주석 태그
  • 시맨틱 태그
    • <header> : 제목, 사이트의 로고 등의 요소를 넣는 태그
    • <nav> : header 태그 안에 여러 메뉴를 구분하는 태그
    • <main> : 중요한 컨텐츠들를 넣는 태그
    • <artical> : 내용과 전혀 관계없는 독립적인 정보 표시하는 태그로, main 안에서 사용되고 독립적으로 배포 또는 재사용되기 위한 의도로 사용 가능
    • <section> :  연관 있는 내용을 묶을 때 사용하는 태그로 article이나 main 안에서 사용
    • <aside> : 문서의 주요 내용과 간접적으로만 연관된 부분을 나타내는 태그
    • <footer> : 부가적인 정보나 링크 추가를 위한 태그로 필수 X

 

 CSS

• 기본적인 문법과 구조
  • CSS(Cascading Style Sheets) : 웹의 스타일을 정의하는 스타일시트 언어
  • UI(User Interface) : 사용자 인터페이스
  • UX(User Experience) : UI를 포함해서 사용자가 웹 페이지 서비스를 이용하면서 직접적&간접적으로 경험하면서 느끼는 종합적인 만족도
  • UI/UX를 고려하여 웹 서비스를 만든다 = 사용자의 입장에서 편리하게 해당 서비스를 이용하고 조작할 수 있도록 하는 시각적인 도구를 만들고, 사용자의 입장에서 편의를 생각한다
  • 구조
    • body { color:red; font-size:30px; }
      • body : 셀렉터(selector)로, 특정 태그의 이름, id, class를 선택할 수 있다.
        • tag : 태그를 선택한 경우
        • .class : 클래스를 선택한 경우, class는 하나의 문서에서 여러 번 사용 가능
        • #id : id를 선택한 경우, id는 하나의 문서에서 한 번만 사용 가능
        • 순서 : ID > Class > tag > *
      • {} : 선언 블록(Declaration block)
      • color:red; : 선언
      • color : 속성명(property)
      • red : 속성값(value)
      • ; : 선언 구분자
  • HTML에 CSS 적용 방법
    • 인라인 스타일
      • 같은 줄에서 스타일을 적용하는 방법
      • ex) <nav style="color:white;"> ... </nav>
    • 내부 스타일 시트
      • 별도의 파일이 아닌 style 태그 내에서 작성하는 방법
    • 외부 스타일 시트
      • HTML 내에서 다른 파일을 연결하겠다는 <link> 태그 사용
      • <link rel="stylesheet" href="index.css" />
  • 직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유
    • 관심사 분리를 위해서 권장하지 않는다.
    • HTML : 웹 페에지의 구조와 내용만 담당
    • CSS : 디자인만 담당
  • CSS Selector
    • 전체 셀렉터: * { }
    • Tag 셀렉터 : h1 { }
    • ID 셀렉터 : #only { }
    • class 셀렉터 : .center { }
    • attribute(속성) 셀렉터 : a[href] { }, p[id="only"] { }, div[class="center"]
    • 후속 셀렉터 : header h1 { }
    • 자식 셀렉터 : header > h1 { }
    • 인접 형제 셀렉터 : section + p { }
    • 형제 셀렉터 : section ~ p { }
    • 가상 클래스
      •  a:link { } : 방문하기 전의 링크
      • a:visitied { } : 방문한 링크
      • a:hover { } : 링크에 마우스 포인터를 올려놓았을 때
      • a:active { } : 링크를 마우스로 클릭한 순간
      • a:focuse { } : 요소에 초점이 맞춰질 때
    • 구조 가상 클래스 셀렉터
      • p:first-child { } : 각 계층에서 첫 자식이 p 태그인 경우
      • p:last-child { } : 각 계층에서 마지막 자식이 p 태그인 경우
      • p:nth-child(2n) { } : 각 계층에서 짝수번째 자식이 p 태그인 경우
      • p:nth-child(2n+1) { } : 각 계층에서 홀수번째 자식이 p 태그인 경우
      • p:nth-child(4) { } : 각 계층에서 4번째 자식이 p 태그인 경우
      • p:first-of-type { } : 각 계층에서 자식 중에서 첫번째 p 태그인 경우
      • p:last-of-type { } : 각 계층에서 자식 중에서 마지막 p 태그인 경우
      • p:nth-of-type(2) { } : 각 계층에서 자식 중에서 2번째 p 태그인 경우
        
    • 부정 셀렉터 : input:not([type="password"]) { }
    • 자식 VS 후속 : 자식 - 바로 아래 계층의 태그, 후손 - 아래 있는 모든 태그
    • 입접 형제 VS 형제 : 인접 형제 - 같은 계층에서 바로 뒤에 있는 태그, 형제 - 같은 계층에 있는 모든 태그
  • 기본적인 CSS 박스 모델
    • 박스(box) : 웹 페이지 내의 모든 각각의 콘텐츠들의 고유의 영역
    • 웹 페이지를 구성하는 박스 모델
    • 박스 종류
      • block : 줄바꿈 O, 기본적인 너비 100%, width&height 사용 O
      • inline-block : 줄바꿈 X, 기본적인 너비 = 콘텐츠 크기, width&height 사용 O
      • inline : 줄바꿈 X, 기본적인 너비 = 콘텐츠 크기, width&height 사용 X
      • ex) 대표적인 inline인 span에서 width&height 사용하기 위한 코드
        • span { display: inline-block; }
    • margin 값을 음수로 지정하면 다른 엘리먼트와 겹칠 수 있다.
    • 박스를 넘어가는 컨텐츠 처리 - overflow 속성 사용
      • overflow:auto; : 콘텐츠가 넘치는 경우 스크롤을 생성
      • overflow:hidden; : 콘텐츠 숨기기
    • 박스 크기 지정
      • p { box-sizing:border-box; } : 여백과 테두리를 포함하는 박스
      • p { box-sizing:content-box; } : 박스 크기 측정 기본값으로, 오직 content의 크기만 측정
  • 레퍼런스 사이트를 이용해서 CSS 속성 검색 및 사용하기

 

⭐ 공부 난이도

HTML ☆☆☆☆★

CSS ☆☆☆★★

 

🌕 느낀점

  얘전에 공부한 HTML 부분은 막힘없이 넘어가는데, CSS 부분은 자세한 공부를 하지 않아서 복잡했다. 특히 셀렉터를 선택하는 문제를 풀때 헷갈렸지만 여러 번 반복을 통해서 감은 잡을 수 있게 되었다. CSS는 큰 부분은 아니어서 간단히 아는 정도로 넘어가기로 하였다. 초보자가 이 내용을 하루만에 하려고 하면 벌써부터 빡셀거라는 생각이 든다. 만약 나도 HTML이나 CSS에 대해서 전혀 모른 상태에서 이 공부를 진행했다면 상당한 시간과 집중력을 요구할 것이다. 

  좋은 점은 이미 공부한 내용이어서 복습하면서 새롭게 알게 된 부분을 조금 더 공부하는 느낌으로 해서 여유롭게 공부를 할 수 있었다. 안좋은 점은 어제 무리를 했는지 편도선이 부어서 집중이 잘 안되고 몸이 춥다. 벌써부터 체력관리를 잘못해서 3일차부터 진도 나가는 부분에서 문제가 생겨버렸다. 몸이 안 좋아도 하루 진동은 빠르게 끝내는 것이 중요할 것 같아서 박스 모델 이후로는 가볍게 내용을 보고 최종 퀴즈를 풀었다. 다행히도 전부 정답을 맞추었다. 오늘은 빨리 쉬고 내일 1시간 일찍 일어나서 내용 정리 및 복습해야겠다.