HTML과 CSS 기본

욱·2020년 8월 10일

CSS front end html

Front-end

목록 보기

1/2

HTML & CSS

1) Web을 배우는 이유?

웹 애플리케이션 개발을 통해 SW개발 방법 및 학습 과정을 익히기 위해서
웹은 기초이기 때문에..!
모든 요청은 URL로 이루어진다.
- URL(Uniform Resource Locator)
- URI (Uniform Resource Identifier)
Rendering

요청받은 내용을 Browser 화면에 표시하는 것
- HTML 및 XML 문서와 이미지를 표시 가능

2) JSfiddle

HTML, CSS 코드를 작성하여 실행해볼 수 있다.

3) 웹 표준(Web Standard)

W3C
WHATWG(왓위그) : Apple, Google, Microsoft, Mozilla

HTML Living Standard
- Web은 매우 빠르게 발전하는데, W3C가 못따라가서(?)
- 기술 표준화 주도권 뺏음.

4) Can I Use

Can I use semantic elements?
- 사이트에서 해당 기술 사용가능여부 확인~!

5) MDN web docs(Mozilla Developer Network)

Firefox 브라우져를 만든 Mozilla에서 만든 웹 분석 기술 자료이다.

웹에 대한 신뢰성이 가장 높은 곳!!

6) 개발자 도구(F12)

개발자도구를 사용하면 미리 Debuging해서 파일에 적용시킬 수 있다.

사용 예시)
- Computed tap에서 magin, border 등 미리 바꿔보면서 결정가능
- Elements에서 우측마우스 => Copy => selectors

7) Emmet

HTML 문서 등을 편집할 때 빠른 코딩을 위해 사용되는 오픈소스

대부분 Text Editor에서 지원한다.

1. HTML(HyperText Markup Language)

Web page 작성을 위한(구조를 잡기 위한) 언어
(= Web contents의 의미와 구조를 정의)

1.1 HTML 정의

사용자가 요청한 데이터가 담긴 문서
사용자가 브라우저를 통해 보는 화면 => (Front-End) 화면구성 중요하다!
SW를 평가하는 척도...라고 볼 수 있다.

HyperText
- 기존 동일선상의 page를 다중(multi)으로 연결된 상태로 바꿈.
- '(하이퍼)링크'를 통해서
Markup Language
- 태그 등을 이용하여 문서나 데이터 구조를 명시하는 언어
.html 파일
DOM(Document Object Model) 트리
- HTML도 Convention이 중요하다
  
  ex) Indentation : 2 spaces / 4 spaces

1.2 HTML 기본 구조

html 요소

HTML 문서의 최상위 요소로, 문서의 root를 뜻한다.
- 요소(element)
  - 태그 : 태그별로 사용할 수 있는 속성은 다르다.
  - 내용
- 속성(attribute)

head
- 문서 제목, 문자코드(인코딩)와 같이 해당 문서 정보를 담고 있다.
- 브라우저에 나타나지 않는다.
- CSS 선언 혹은 외부 로딩 파일 지정 등도 작성한다.
- Open Graph Protocol : MetaData를 표현하는 새로운 규약
```
title, description, site_name, url, type, image 등
```

body

브라우저 화면에 나타나는 정보로, 실제 내용에 해당한다.
- header
  - img
    - src : 이미지 주소
    - art : 대체 텍스트
      - Image 로딩에 문제가 생겼을 때 대체할 텍스트
      - ScreenLeader가 정보를 읽어줄 때, 어떤 이미지인지 읽어준다.
      - 시각장애인 등을 배려(접근성 관련)
        
        KWCAG
        
        https://accessibility.naver.com/
        
        naver 널리(?)

form 태그 : 사용자로부터 입력받는 것
- input 필수
Sementic 태그
- 장점
  1. 읽기가 쉬워진다.(개발자)
  2. 개밪라가 의도한 요소의 의미가 명확히 드러남
  3. 코드의 가독성을 높이고 유지보수를 쉽게 함
  4. 접근성이 좋아진다
    - 검색엔진=>시각장애안 용 스트린리버
    - 더 나은 UX 제공
- 예시) Google News

2. CSS(Cascading Style Sheet)

Style과 Layout을 통해 HTML이 어떻게 표현되는지 지정하는 언어이다.

특징
- 모든 Brower는 각자의 Style을 가지고 있다. => 사용자가 읽고 사용하기 편하게
- CSS는 마음대로 Layout하는게 쉽지않다. 수정/개발이 모호한 부분이 많다.
- 규칙에 기반된 언어.

2.1. CSS 구문

HTML에 CSS를 적용하기 위해서는 Selector(선택자)를 사용한다
즉, 구문은 선택자(Selector)로 시작하고 그 안에서 어떤 style로 지정할지 받아들인다.

여러개의 선언(Declaration)이 들어있는데, 속성(Attribute)과 값(Value) 쌍으로 이루어져있다.

2.1.1 CSS 정의 방법

인라인(In-Line)
- 해당 태그에 직접 Style 설정
내부참조(Embedding)
- head의 style 태그 안에
- 반복되고있다. 비효율적?
외부 참조()
- CSS 파일을 따로 만들어서 단독적인 파일로
- HTML 파일에 Link 태그를 통해 적용 (경로 작성)
- 공통되는 부분(속성)들 => 반복이 줄어든다.
- 일반적인 방법
유동적으로 사용한다.

2.1.2 CSS 기능

주로 활용하는 속성 위주로 기억하자!!
- 전부 다 외우는 것은 아니다. 외울 수 없다.
- Global CSS Property Usage를 보면, 기본적으로 90%가 넘는 부분들 외에는 그 때 그 때 찾아서 사용하면 된다.

2.2 CSS Selectors(선택자)

HTML 문서에서 특정한 요소를 선택하여 스타일링 하기 위해서 반드시 필요한 개념

기초 선택자
- 전체(Asterisk), 타입 선택자
  - 전체 선택자 : * {}
  - (태그의) type 선택자 : h1 {}
- 클래스/아이디/속성 선택자
  - 클래스 선택자 : 중복으로(?)
    - 선언 : .class {}
    - 자주 쓰는 것이 있다면 class=""만 그때그때 적용하면 된다.
  - ID 선택자
    - 선언 : #id {}
    - 지양하는 것이 좋다. Debuging 어려움 (우선순위때문에)

고급 선택자
- 자식/자손 선택자
  - 자식 선택자 : .class > p {} (직속 바로 밑에만)
  - 자손 선택자 : .class p {} 포함되는 모두
- 형제, 인접 형제 선택자

의사 클래스(Pseudo class)
- 링크, 동적 의사 클래스
- 구조적 의사 클래스

2.3 CSS 우선순위(Cascading order)

중요도(Importance)
- !important 사용 => 웬만하면 사용 X
  (cascading flow를 파괴하는거니까)
우선순위(Specificity)
- 인라인 > id선택자 > class 선택자 > 요소 선택자
- 소스 순서

2.4 CSS 상속

CSS는 상속을 통해 부모 요소의 속성을 모두 자식에게 상속한다.

상속되는 것 : Text 관련(font, color ...)
상속되지 않는 것
- Box model 관련(w, h, margin, border ...)
- Position 관련(position, top/right/bottom/left ...)

2.5 CSS 단위(unit)

상대 크기 단위
- px (픽셀)
  - html의 기본 픽셀은 16px이다.
- %
- em
  - 배수 단위
  - 부모를 기준 상대적인 사이즈 (부모에 배수)
- rem
  - 최상위 요소(html)의 사이즈를 기준
- Viewport 기준 단위
  - 웹 페이지를 방문했을 때 user에게 보이는 web page 영역
  - 주로 smart phone, tablet 등의 device에서 중요
  - vw, vh, vmin, vmax

색상 단위
- 색상 키워드
  - black
- RGB 색상
  - # + 16진수 표기법
  - rgb() 함수형 표기법
- HSL 색상
  - 채도와 명도로(?)
- a 붙이면 투명도(Apparence) 조절
  - rgba() hsla()

2.6 CSS 문서 표현

텍스트
- 변형 서체
- 자간, 단어 간격, 행간, 들여쓰기 ...
컬러(Color), 배경(Background-image/color)
- <img> : 디자인 + 컨텐츠
- <bgi> : 단순 디자인 요소
목록 / 표 꾸미기

2.7 CSS Box Model

CSS에서는 모든게 네모네모이다!

Box model 구성
- Margin : 테두리 바깥의 외부 여백 (배경색 지정 불가)
  - 마진 안주면 없다.
- Border : 테두리 영역
- Padding : 테두리 안쪽의 내부 여백 (배경색, 이미지까지 가능)
- Content : 글/이미지 등 요소의 실제 내용
short-hand (축약 형태 사용 가능)

Box-Sizing
- 기본적으로 모든 요소의 box-sizing은 content-box이다.
  
  (Padding을 제외한 순수 contents 영역만을 box로 지정)
- but 일반적으로 영역이라 함은, border까지의 너비를 보길 원한다.
  
  => border-box로 맞춰서 설정!

마진 상쇄(Margin Collapsing)

top, bottom 마진이 충돌하면 가장 큰 margin으로 결합된다.

배치

인라인 / 블록 요소
- Display : block
  - 줄 바꿈이 일어나는 요소
  - 화면 크기 전체의 가로 폭을 차지 (너비의 100% 차지)
  - 블록 level 안에 인라인 level 요소가 들어갈 수 있다.
  - div / ul, ol, li / p / hr / form 등
- Display : inline
  - 줄바꿈 X, 행의 일부 요소
  - content 너비만큼만 가로 폭 차지
  - width, height, margin-top ... 지정 불가
  - 상하 여백은 line-height로 지정
  - span / a / img / input, label / b, em, i, strong 등
- Display : inline-block
  - 두 특징 모두 가진다.
- Display : none
  - 표시하지 않는다. 공간조차 사라짐
  - cf) visibility: hidden 은 빈공간 남김

2.8 CSS Position

position 속성은 문서 상에서 요소를 배치하는 방법을 정한다.

static : default 값 (기준 위치)
- 기본적으로 좌측 상단(요소의 배치 순서에 따라)
- 부모 요소 내에서 배치될 경우 부모요소의 위치를 기준으로 배치
relative : static 위치를 기준(상대위치)
absolute : static이 아닌 가장 가까운 부모/조상 기준으로(절대위치)
fixed : 관계없이 브라우저를 기준 (ex. 내비게이션 bar)

3. 정리

HTML : 웹 페이지가 어떻게 구조화 되어있는지 알 수 있도록 하는 마크업 언어
CSS : 사용자에게 문서를 표시하는 방법을 지정하는 언어
앞으로 Front에서 주구장창 쓸 테니 익숙해지자!!

욱

다음 포스트

HTML과 CSS 기본

Front-end

HTML & CSS

1) Web을 배우는 이유?

2) JSfiddle

3) 웹 표준(Web Standard)

4) Can I Use

5) MDN web docs(Mozilla Developer Network)

6) 개발자 도구(F12)

7) Emmet

1. HTML(HyperText Markup Language)

1.1 HTML 정의

1.2 HTML 기본 구조

2. CSS(Cascading Style Sheet)

2.1. CSS 구문

2.1.1 CSS 정의 방법

2.1.2 CSS 기능

2.2 CSS Selectors(선택자)

2.3 CSS 우선순위(Cascading order)

2.4 CSS 상속

2.5 CSS 단위(unit)

2.6 CSS 문서 표현

2.7 CSS Box Model

2.8 CSS Position

3. 정리

Bootstrap v4.5

0개의 댓글