[Front-End] HTML & CSS

7013 단어 CSSfront endhtmlCSS

INTRO

1. 언어

  • HTML : 구조화
  • JS : 생동감
  • CSS : 꾸미기


2. 웹 브라우저

1) W3C

https://www.w3.org/
: 웹 브라우저, 페이지의 권고안
-> W3C validator로 웹 표준에 부합하는지 검사 가능

2) 웹 접근성 연구소

https://www.wah.or.kr:444/Participation/guide.asp
: 개발자들의 웹 콘텐츠 접근성 지침


3. VS CODE

생활코딩 강의를 통해 써본 적은 있는데 한국어 패치 다운 받는 법은 처음 알았다ㅋㅋㅋㅋㅋ 미리 알아볼 걸...

1) 확장프로그램

ex) 한국어 패치, beautify, live server(얜 이미 하고 있었음)

2) 단축키

파일>기본설정>바로가기 키


4. 이미지

>> 비트맵 vs 벡터

1) 비트맵

: 픽셀이 모여진 이미지로, 화면에 렌더링 되는 형식으로 출력
ex) jpg, png, gif

2) 벡터

: 점, 선, 면의 위치에 따라 화면에 렌더링 되므로 이미지가 깨지지 않지만 많은 연산이 필요
ex) svg










HTML

1. 문법

1) 태그: tag

: HTML의 핵심 문법으로, 화살괄호 '<>' 안에 시행하고자 하는 내용을 담아 표현하는 것
https://www.advancedwebranking.com/html/

<TAG> 내용 </TAG>
: 열리고 닫히는 구조

2) 속성: attribute

: 태그의 정보만으로는 정보가 부족할 때, 부족한 정보를 보충해주는 용도

<TAG 속성="값"> 내용 </TAG>

3) 부모자식 구조

: 다른 태그를 부모 태그가 품는 구조 (상위-하위)

<PARENT>
	<CHILD></CHILD>
</PARENT>

4) 문서 형식 지정

: DOCTYPE이 문서 형식을 지정하는 역할을 함


2. 주요 태그 - HEAD

1) TITLE

: 웹 페이지의 제목을 나타내는 태그 (탭의 이름)

<head>
	<title> 벨로그 </title>
</head>

2) META

: 기타 정보를 나타내는 태그

>> 주요 속성

: charset, name, content

<head>
	<meta charset="UTF-8">
</head>

3) LINK

:외부 문서 연결 (CSS 문서)

>> 주요 속성

: rel, href

<head>
	<link rel="stylesheet" href="./css/main.css">
</head>

4) STYLE

: CSS로 꾸미지 않고 HTML로 직접 꾸밀 때

5) SCRIPT

: CSS를 HTML로 작성할 때, SCRIPT 태그 내에 작성하면 됨


3. 주요 태그 - BODY

1) DIV

: 별 의미 없는 태그로, 뭐든 감싸거나 묶는 데 사용되는 태그

2) IMAGE

: 이미지 삽입하는 태그

>> 주요 속성

: src, alt







CSS

1. style 태그

용어 정리

  • Selector: 본문에서 선언이 적용될 곳을 특정하는 부분으로, selector로 선택된 것의 종류에 따라 tag 선택자, class 선택자, id 선택자라 부르기도 함.
  • Declaration: 표현하고 싶은 것을 나타내는 부분
  • Property: 속성
  • Value: 값


2. 속성 type

1) 크기

>> 가로 세로

  • width: 가로 너비
  • height: 세로 너비
    -> 단위: px

>> 폰트

  • font-size: 폰트 크기
div{
	width: 300px; height: 600px;
    // 요소의 가로너비: 너비값;
    font-size: 16px;
}

2) 여백

div{
	margin-top: 20px;
    margin-right: 10px;
    margin-botton: 15px;
    margin-left: 20px;
    padding: 7px;
    
}

3) 색상

  • color: 글자 색상
  • background-color: 요소 색상
div {
	color: blue;
	background-color: red;
}
245. 사다리 조작
mixin scss import 하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage