7월 3째주 - CSS Flex & CSS Grid 강의

23/07/17 실시간 강의

 

오늘은 웹 기초(HTML, CSS, JS)에 대해 간단히 배웠다.

배운 내용을 까먹지않게 정리해보자.

 

HTML이란?

- 웹을 이루는 가장 기초적인 구성 요소

- 웹 페이지를 만들기 위해 필요한 표준 마크업 언어

 

HTML 구성요소

요소(Element): <태그 (속성)>내용</태그>

 

- 태그

• 웹 문서를 구성하는 명령어
• 꺽새 안에 들어있는 정보 정의
• 종료 태그가 없는 <br />, <hr />과 같은 태그도 존재

 

-요소

• 시작태그, 종료태그, 그 사이의 내용으로 구성
• 블록 요소: h1~h6, div, list, p...시맨틱 태그
  • 다른 블록 요소 포함 가능
  • 인라인 요소 포함 가능
  • 블록 요소 이후 블록 요소 사용하면 아래줄에 나타남
  • margin, padding값 가질 수 있음
• 인라인 요소: a, span, strong...
  • 블록 요소 안에 포함됨
  • 다른 인라인 요소 포함 불가능
  • 블록 요소 포함 불가능
  • width, height값 가질 수 없음
  • 인라인 요소 이후 인라인 요소 사용하면 가로로 나타남
  • display: block을 이용해 너비 생성 가능(<span style="display:block">span</span>

 

- 속성
<button style="width:20px">버튼 클릭</button>

• 태그를 보조하는 명령어로 태그 안쪽에 존재
• 태그의 문법 명령어가 다루지 못하는 명령을 보조
• width, height, alt, style, href 등이 있음

 

 

시멘틱 요소란?

의미가 있는 요소로 브라우저와 개발자 모두에게 의미를 명확하게 설명

ex) <form>, <article>, <table>: 내용을 명확하게 정의

cf) non-sementic: <div>, <span> - 내용에 대해 아무것도 알려주지 x. 태그들의 이름만 보고는 어떤 내용인지 유추할 수 없음

 

 

HTML 기본 태그와 역할

- Heading(<h~>): <h1> ~ <h6>이며 주로 웹페이지에 표시하려는 제목으로 사용

 

- Paragraphs(<p>): 문단을 정의할 때 사용

 

- Preformatted Text(<pre>): 미리 정의된 형식의 텍스트를 정의할 때 사용. 여백, 줄바꿈 모두 그대로 반영함

 

- List(li)

• <ol>: 순서가 있는 목록
• <ul>: 순서가 없는 목록
• <dl>: 설명 목록
  • <dl>: 목록의 시작 정의
  • <dt>: 용어 정의
  • <dd>: 용어 정의를 설명

 

- Break(<br>): 줄바꿈 구현

 

- Horizontal(<hr>): 수평선 구현

 

- 텍스트 서식

• <strong>: 글씨 굵게&강조(보기에는 같지만 의미적으로 강조)
• <b>: 글씨 굵게
• <em>: 글씨 기울게, 글씨 강조
• <i>: 글씨 기울게
• <small>: 작은 텍스트 정의
• <mark>: 해당 부분 형광펜으로 하이라이트 표시(강조)
• <sub>: 아래첨자 텍스트 표시
• <sup>: 윗첨자 텍스트 표시

 

- 인용

• <blockquote>: 들여쓰기 표현(블록 요소)
• <q>: 따옴표로 표시(인라인 요소)

 

 

CSS(Cascading Style Sheets)란?

사용자에게 문서를 표시하는 방법을 지정하는 언어(스타일, 레이아웃 등)

웹 사이트에서 화면에 표시되는 정보들을 꾸며주는 역할

 

1. 인라인 스타일(HTML 안에서 Style 속성을 이용)

 

2. 내부 스타일 시트(<style> 태그를  사용해 HTML 문서 내부에서 이용)

 

3. 외부 스타일 시트(별도로 CSS 파일 분리해 HTML의 문서에 연결)

 

스타일 적용 순서: 인라인 > 내부, 외부 스타일 시트 > 웹 브라우저 기본 스타일

 

 

CSS의 기본 구조

셀렉터: CSS 적용할 위치의 HTML 요소 

프로퍼티: 셀렉터가 지정한 위치의 무엇을 바꿀 것인지 결정

값: 프로퍼티로 지정한 것을 얼마나 바뀌게 할지 결정

 

 

수치값을 표현하는 방법

1. 픽셀

 

2. 퍼센트

 

3. em, rem - 환경에 따라 변하는 단위(가변 단위)

- em: 같은 엘리먼트 font-size or 상위 엘리먼트 font-size

- rem: 최상위 엘리먼트 font-size(별도 설정 없으면 브라우저 기본 값)

 

 

transition(CSS)

transition: <property> <duration>

- 스타일 변경 시 부드럽게 전환(호버링 시 사용)

- 선택자가 변화되는 것을 시간의 흐름을 줘서 변화시키는 속성

 

 

가상클래스(pseudo-class)

별도의 클래스 지정하지 않아도 지정한 것 처럼 요소 선택 가능

 

 

가상요소(pseudo-element)

가상클래스처럼 선택자에 추가되며 존재하지 않는 요소를 존재하는 것처럼 부여해 문서의 특정 부분 선택 가능

::before, ::after는 꼭 content와 같이 쓰여야 하며 이 content는 가짜 속성임

li::after {
    content: '|';
    padding-left: 30px;
}

li:first-of-type::before {
    content: 시작;
}

 

 

float

컨테이너 왼쪽, 오른쪽에 요소를 배치해 텍스트 및 인라인 요소가 주위를 둘러쌀 수 있도록 함

요즘에는 레이아웃을 만들기 위한 훨씬 강력한 도구 Flexbox, Grid를 사용

 

 

clear

float의 영향을 받지 않도록 함

float 속성을 사용하고 아래(오른쪽, 왼쪽 x)다음 요소를 원할 때 사용

- none: 요소가 왼쪽, 오른쪽 부동 요소 아래로 푸시되지 x(기본값)

- left: 요소가 왼쪽 부동 요소 아래로 푸시

- right: 요소가 오른쪽 부동 요소 아래로 푸시

- both: 요소가 왼쪽, 오른쪽 부동 요소 아래로 푸시

- inherit: 요소는 부모로부터 clear 값 상속

 

float를 지울 때 float와 clear를 일치시켜야 함

요소가 왼쪽으로 float되어있으면 왼쪽으로 clear시켜야함(float: left; => clear: left;)

 

 

CSS Box Model(Margin, Padding, Border)

모든 HTML 요소를 감싸는 상자

content: 텍스트의 이미지가 나타나는 상자 내용

padding: 콘텐츠 주변 영역을 지움(패딩이 투명)

border: 패딩과 콘텐츠를 둘러싸는 테두리

margin: 테두리 밖 영역 지움(여백이 투명)

- 음수 margin: 다음과 같은 요소로 향하게 함

- 양수 margin: 요소에서 물건을 밀어냄

 

padding: <top> <right> <bottom> <left>

margin: <top> <right> <bottom> <left>

border: <width> <style> <color>

 

 

Image

<img class='image' src='image.jpeg' alt='이미지 이름'>

src: 이미지 소스 URL

alt: 이미지 보여줄 수 없을 때 해당 이미지를 대체할 텍스트

.image {
    width: 400px;
    height: 400px;
    
    object-fit: cover;	// 늘어나거나 왜곡되지 않고 전체 영역을 포함하도록 이미지 확대
    object-fit: contain; // 영역에 포함되도록 이미지 축소
    object-fit: fill;	// 기본값으로 주어진 치수 채오도록 크기 조정(늘어나거나 찌그러짐)
    object-fit: none;	// 이미지 크기 조정 x
    object-fit: scale-down;	// 이미지가 none, 포함의 가장 작은 버전으로 축소
    
    object-position: left
}

 

 

Transform

문법: transform: none | transform-functions | initial | inherit;

- none: 변환이 없어야 함을 정의

- initial: 이 속성을 기본값으로 설정

- inherit: 부모 요소에서 이 속성 상속

 

 

transform-functions

 

 

animation CSS

CSS 애니메이션을 사용하려면 먼저 애니메이션에 대한 몇 가지 키프레임 keyframes를 지정해야 함

키프레임은 특정 시간에 요소 스타일을 유지

 

 

animation direction

 

 

background-clip

요소 내에서 배경(색상, 이미지)이 확장되어야 하는 거리를 정의