HTML 과 CSS 기초

html

브라우저에서 실행 가능한 가장 기본적인 파일

마크업언어 : tag를 이용한 구조적 구조

❖ 계층적 구조 DOM Tree 구조로 보관

: DOM Tree 구조로 보관

❖ TopDown 방식

❖ <tag>를 이용한 구조

<head>

: html 문서의 meta 정보 기억

<body>

: 사용자의 화면에 보여지는 정보

<div>

: style 그룹 지정 시 사용 가능 -> 의미에 맞는 태그 사용 중요

출처 https://www.youtube.com/watch?v=OoA70D2TE0A&t=731s

❖의미에 맞는 태그의 중요성

의미

이미지

제목 ( 대제목, 소제목)

문단

표

강조

링크

❖ HTML 에 추가할 수 있는 속성

attribute
⭐️class	css style 만들고 부르는 역할 여러번 사용
⭐️id	태그의 고유한 정보 표현 1번만 사용 추천(유니크한 값) 바깥 레이아웃 결정 영역에 주로 부여
data	HTML element 내 데이터 읽고 저장하는 역할
style	html 에서 style 직접 지정

❖ element == node

: <> 이 태그로 감싸져 있는 속성 하나

ex) <p> hi </p>

❖ inline & block

inline	block	inline-block
웹페이지 한줄 (들어간 내용만큼) 나눠서 차지	웹페이지의 한 줄씩 차지	지정한 box의 크기만큼 한줄 차지
span	div

브라우저는 어느정도의 오류를 고쳐줌

CSS

selector {
	property : value;
}

❖ 스타일 지정방식

inline	internal	external
HTML 태그 내 지정	style 태그로 지정	외부 css 파일로 지정
<h1 style = "color: blue"> HELLO </h1>	<style>

<h1 style = "color: blue"> HELLO </h1>

<style>
	h1 { 
    	color :blue;   
        }
</style>

 <link rel="stylesheet" href="css/style.css">

❖ Cascading

: 브라우저의 style은 경쟁에 의해 결정 -> 우선순위가 있음

Author style (개발자 지정) > User style (사용자 지정) > Broswer (브라우저 기본 제공)

* Important ! : 상단 우선순위를 무시하고 가장 중요한 style로 제기 -> 좋지 않은 문법

inline > internal = external

1) 나중에 선언한것이 적용

2) 구체적인것이 우선 적용

3) id> class > element

❖ 상속

: CSS 속성은 상속됨

❖ CSS Selector

: DOM Tree에서 원하는 node를 찾는 방법

모든 태그	* {}
Tag	div {}
id	#id{}
class	.class{}
state	:
Attribute	[]

ex)

/* 버튼 누르면 글자색 red로 변화*/
button : hover {
	color: red;
}

/* .com 으로 끝나는 alink */
a[href$=".com"] }
	color: blue;
}

Padding	margin
content 안에	content 밖

padding: 위px 오른쪽px 아래px 왼쪽 px;

flukeout.github.io/

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

selector 연습할 수 있는 사이트 UI 가 넘모 귀엽다 🍎

plate + apple	plate 옆에 있는 사과 class들
bento ~ pickle	bento 옆으로 있는 피클 class들
plate > apple	plate 안에 바로 있는 apple 만
plate :first-child	plate안 첫번째
plate :only-child	plate안 하나만 있는 것들만
nth-child(3)	3번째 자식
bento: nth-last-child(3)	벤토class 중 뒤에서 3번째 * 큰 범위, 작은범위 각각에서 찾음
nth-of-type(even)	짝수만
nth-of-type(2n+3)	짝수 중에서 3번째부터 ( n=0,1,2...)
[for^="Sa"]	for t속성이 "Sa"로시작하는 것
[for$="Sa"]	for 속성이 "Sa"로 끝나는 것
[for*="Sa"]	for 속성에 "Sa"가 들어가는 것

❖ Position

position : 00000 ;

static	기본값
relative	원래 있더 자리에서 상대적으로 옮겨짐
absolute	원래 있던 상자에서 옮겨감
fixed	상자에서 벗어나 window 즉 웹페이지 상에서 움직이는 것
sticky	원래 있던 자리에 있으면서 스크롤링 될때도 붙어있기

'📕 Web기초' 카테고리의 다른 글

CSS Flex(Flexible Box) 개념정리 (0)	2021.02.15
JavaScript 기본 (0)	2021.01.04
[Web] HTML 기초 - 웹사이트 (0)	2020.12.19
[Web]코딩의 기초와 웹, 앱 프로그래밍 (0)	2020.12.19

HTML 과 CSS 기초

html

CSS

'📕 Web기초' 카테고리의 다른 글

댓글

티스토리툴바

HTML 과 CSS 기초

html

CSS

'📕 Web기초' 카테고리의 다른 글

관련글

댓글

티스토리툴바