HTML/CSS 기초

2020.01.17

2020.01.17 성슬기 전임님, 최민호 전임님의 HTML/CSS 기초 교육을 토대로 작성하였습니다.

웹 구성요소

HTML

• 구조 정함

CSS

• 구조에 디자인을 입힘

JS

• HTML 동작을 정의

웹 표준

웹 접근성

• 물리적 / 환경적 제약이 있는 환경에서도 접근 할 수 있도록
• ex. 마우스, 키보드가 없는 환경

웹 호환성

• 브라우저에 독립적

HTML 구성요소

여는 태그

닫는 태그

속성(어트리뷰트)

내용 -> 사용자가 보는 부분

HTML 문서 구조

DOCTYPE

• 브라우저가 문서를 해석하는 방법
• 생략하면? -> 쿽스모드로 렌더링 -> 브라우저마다 다름

html

• 전체를 감싸는 태그
• lang 속성 -> 웹 접근성 준수

head

• 문서에 대한 정보
• meta
  • 문서에 대한 meatadata
  • 사용자에게 보이지 않음
  • 인코딩 설정
  • IE 호환성
  • Viewport 설정
  • Open Graph Protocol
    • 페이스북에서 만든 meta tag
    • 페이지에 대한 요약 정보
      • 이미지 -> 절대경로

title

body

• h 태그
  • 제목, 부제목 표현
• p 태그
  • 단락을 표현
• ol, li 태그
  • 순서있는 리스트
• ul, li 태그
  • 순서 없는 리스트
• strong, em 태그
  • 굴게, 기울임
• blockquote 태그
  • 인용구 표현
  • 보통 css 스타일 적용
• pre, code 태그
  • pre : 미리 지정된 서식 그대로 표현
  • code : monospace 글꼴로 표현 -> 글자마다 너비가 같음 -> 코드 표현하기 좋음
• a 태그
  • 하이퍼링크 표현
  • href : 이동할 주소
  • target : 페이지 이동 방식
    • _blank : 새 창에서 연다
• img 태그
  • alt 속성
    • 이미지의 대안
    • 주소가 잘못되었거나 해당 위치의 서버에 문제가 생겨 이미지를 못 읽어 올 때, 이미지를 대체하여 표시
• div 태그
  • 영역을 나눌 때
  • block 속성을 가짐 -> 한 줄을 꽉 차지함

Semantic Element

의미론적인 Element

역할

• div와 같은 역할
• 개발자 가독성이 좋아짐
• 검색 엔진이 논리적으로 필요한 부분을 찾기 쉬움

Tag

• main : 문서의 주요 콘텐츠 포함, 문서 내에 단 하나만 존재
• header : 문서 로고, 메뉴 등을 감쌈
• nav : 다른 페이지로의 링크
• aside : 주요 내용과 간접적으로만 연관된 부분
• section : 하나의 주즈를 묶을 때
• footer : 저작권 등 하단에 표기
• figure : 멀티미디어 요소
• article : 글자 많은 것

CSS

Cascading Style Sheet 문서의 표현을 기술하는 스타일시트 언어

구성요소

• 셀렉터
• 속성
• 값

적용 방법

• Inline
  • 각 태그마다 스타일 적용, 관리가 쉽지 않음
  • 우선순위가 가장 높기 때문에 상속 면에서 좋지 않음
• Embedded
  • head 안에 style로 감싸서 넣음
  • CSS가 간단한 페이지인 경우 사용
• External
  • 별도의 CSS 파일로 분리
  • 가장 일반적인 방법
  • link rel=’…’

CSS 상속

• 부모 엘리먼트에 적용된 스타일이 자식 엘리먼트에 적용됨
• 일부 속성에 대해서만 상속
  • 상속 되는 속성 : visibility, opacity, font …
  • 상속 되지 않는 속성 : margin, padding, border …

CSS 셀렉터

• CSS를 적용할 요소를 지칭
• HTML에서는 id 는 유일하게!!!
• class 이름은 여러 개 사용 가능
• 태그 셀렉터
• ID 셀렉터
  • id값 앞에 #
  • 우선순위 때문에 사용 x
• 클래스 셀렉터
  • class값 앞에 .
  • 가장 많이 사용
• 속성 셀렉터
  • 대괄호 안에 속성명=’값’ 형태로 사용
• 부모자식 관계
  • 자손 셀렉터
    • 부모 밑에 자손을 선택하기 위해 사용
  • 자식 셀렉터
    • 부모와 자식 선택 시 > 사용
  • 자식, 자손의 차이
    • 자손 : 자식의 자식의 자식 = 자손
    • 자식 : 자식의 자식의 자식 != 자손
  • 형제 셀렉터
    • 바로 뒤 형제 선택 시 + 사용
    • 모든 형제 선택 시 ~ 사용
  • 전체 셀렉터
    • 모든 엘리먼트 선택 시 * 사용
    • 성능에 좋지 않음
  • 유사 클래스 셀렉터
    • 엘리먼트의 특별한 상태일 때 선택 (이벤트)
      • hover : 마우스 오버
      • active : 클릭된 상태
      • focus : 포크스가 있을 때
      • first-child : 해당 요소 중 첫 번째
      • nth-child(n) : 해당 요소 중 n 번째
  • 유사 엘리먼트 셀렉터
    • 존재하지 않은 엘리먼트를 선택
    • 가상요소이기 때문에 블록 지정이 안됨
    • 주로 문자열을 지정할 수 있는 content 속성과 함게 사용
    • 콜론 2개(::) 사용 권장
    • first-letter : 첫 번째 글자
    • before : 엘리먼트 내용의 앞

CSS 우선순위

• 클래스 셀렉터 > 태그 셀렉터
• 우선순위 같을 때 -> 나중에 적용된 스타일 적용

CSS 박스 모델과 Flexible 박스

CSS 박스 모델

• CSS 레이아웃에 기본이 되는 개념
• 구성요소
  • margin : 바깥 여백
  • border : 테두리
  • padding : 안쪽 여백
  • content : 내용
• background-clip
  • 배경을 채워줄 범위 지정
  • 박스모델 구성요소를 살펴보기 좋은 속성
  • border-box : 테두리 영영까지
  • padding-box : 안쪽 여백부터
  • content-box : 안쪽 여백을 제외한 내용 부분만
  • text : 텍스트 위로만
• box-sizing
  • content-box : 내용을 기준으로 엘리먼트 크기를 잡음
  • border-box : 테두리 기준으로 엘리먼트 크기 잡음
  • width, height
• margin
• border

CSS Display

엘리먼트를 블록과 인라인 중 어느쪽으로 처리할지 결정

• block
• inline
  • 부모 엘리먼트에게 text-align:center로 가운데 정렬
• inline-block
  • 여러요소와 같이 한 행에 있을 수 있음
• none
  • 해당 요소를 화면에서 보이지 않게 함
  • visibility:hidden과의 차이
    • 영역을 유지하는냐의 차이

CSS Flexible 박스

HTML5의 새로운 display 속성

• 모든 모던브라우저에서 지원
• 성능면에서도 이전 레이아웃 모델과 비교해서 렌더링 시간이 빨라짐
• Flex Container
• Flex Item
• flex
  • 남는 공간을 유동적으로 조절
  • none : 원래 지정된 공간 차지
  • {숫자} : 나머지 공간을 비율로 나눠서 차지
  • flex-direction은 row가 기본값

가로/세로 정렬

• block 정렬(margin)
• inline (text-align)