부스트 코스의 [초보자를 위한 HTML & CSS 동작과 원리] 강의 (1)

기본기 다지기 - 부스트 코스의 [초보자를 위한 HTML & CSS 동작과 원리] 강의
HTML 이란 무엇인가와 HTML의 튜토리얼을 위한 간략하게 잘 정리된 강의입니다.
주니어 탈출기로 프론트엔드 개발자 첫 밑바닥을 이 강의와 뉴렉쳐의 HTML/CSS 강의를 함께 복습하기에 적합한 강의였습니다.

CHAPTER 1: HTML을 통한 웹사이트 구조 설계

• HTML 이란 무엇인가. HyperText Markup Language
• html, head, body 로 구성되어 있으며 head 는 화면에 보여지기 위한 추가적인 메타정보를 담고 있고 body 는 화면에 보여지는 부분을 담당.
• CHAPTER 1: HTML을 통한 웹사이트 구조 설계
• HTML 이란 무엇인가. HyperText Markup Language
• html, head, body 로 구성되어 있으며 head 는 화면에 보여지기 위한 추가적인 메타정보를 담고 있고 body 는 화면에 보여지는 부분을 담당.
• ID/Class 사용의 예.
• 개발자도구(Elements Tab)을 활용한 HTML CSS 디버깅

CHAPTER 2: CSS 기본개념과 렌더링원리

(1) CSS를 HTML에서 사용하는 방법

• selector(선택자) / property / value
• style 을 HTML 페이지에 적용하는 세 가지 방법
• inline / internal / external (최우선순위 순)
• inline : HTML 태그 안에 스타일을 기입
  장점 - 별도의 CSS 파일 관리 x / 서버의 CSS 파일을 부르기 위해 브라우저가 요청을 안해도 된다는 점.
  단점 - 구조와 스타일이 섞이게 되므로 유지보수의 어려움
• external : 외부파일(.css)로 지정

(2) CSS에서의 상속 개념

• div ul li div p {
  color : green;
  } // 연속된 엘리먼트들에게 속성 부여
• body > div {
  color : green;
  font-size : 30px;
  border : 2px solid slategray;
  padding : 30px;
  } // body 직속 하위 div 에게만 부여.
• body > div {
  color : green;
  font-size : 30px;
  border : 2px solid slategray;
  padding : 30px;
  } // 이 경우에 div 하위 엘리먼트들은 모두 green/30px 이지만 border/padding 과 같은 배치는 상속받지 않음.

(3) CascadingCascading ( css specificity ) - computed style 이 결정되는 방식

• span { color : red ; } / span { color : blue ; } blue. 나중에 것 적용 
• body > span { color : red ; } / span { color : blue ; } red. 구체적인 것 적용
  
  • ID > CLASS > ELEMENT 
    #a {
    color:red;
    }
  • .b {
    color:blue;
    }
  • div { 
    color:green;
    } 

(4) CSS Selector 

• HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법
• Tag / ID / Class
• Selector의 다양한 활용 
  • 그룹 선택
    • h1, span, div { color : red }
  • 요소 선택 (자손 요소)
    • #textId span { color : red }
  • 자식 선택 ( > ) 
    • #textId > span { color : red }
  • n번째 자식요소 선택 ( nth-child )
    • #textId > p:nth-child(2) { color : red }

CHAPTER 3: CSS 기본스타일 적용방법

 (1) Color / Font 와 같은 스타일 변경 방법

• Font 색상
  • color : red;
  • color : rgba(255, 0, 0, 0.5);
  • color : #ff000;
• Font 사이즈 변경
  • font-size : 16px;
  • font-size : 1em; ==> 상위 태그에 기본 텍스트 값이 기준으로, 1em은 (기준값)x1 px 입니다.
• Background color
  • background-color : #ff0;
• 글씨체 / 글꼴
  • font-family : "Gulim ";
  • font-family : monospace;

(2) Box Model을 이용한 엘리먼트 배치

• CSS에서 Element는 박스의 형태를 가지고 있는데, 이를 박스모델(Box model)이라고 합니다.
  박스 모델의 속성과 다양한 축약표기법에 대해 알아보겠습니다.
• Box Model
  • HTML의 element는 사각형 박스 형태를 가지며, 다음과 같은 속성을 가집니다.
  • margin : elements 간의 간격
  • border: 테두리 두께
  • padding : 테두리와 글자 간의 간격
• margin의 특성
  • 인접한 두 개의 block element가 서로 다른 margin 을 가지고 있다면?
    • 큰 값을 가진 margin값이 공유되어 사용됨
    • 10px + 20px = 20px (같은 엘리먼트에 적용된 경우이기 때문에)
  • 인접한 두 개의 inline element의 margin은?
    • 각각의 margin 의 합으로 표현된다.
    • 10px + 20px = 30px (서로 다른 마진이기 때문에)
• margin, padding의 다양한 축약표기법
  • margin : 0px, 0px, 0px, 10px; (top, right, bottom, left)
  • margin : 10px; (네 개의 분면이 모두 10px
  • margin : 10px 15px; (top, bottom은 10px, right left는 15px)

 

 

// 유용한 링크를
- www.jsbin.com : JS Bin 온라인 에디터. 내 PC에 별도의 환경설정이나 프로그램 설치 없이 웹 페이지에서
바로 HTML/CSS/JS를 편집할 수 있는 사이트
- www.w3schools.com : 가장 퍼블릭한 HTML/CSS/JS DOC 페이지
- www.w3schools.com/tags/ref_byfunc.asp : HTML 태그의 종류 참고 페이지