✔️ WEB
-world wide web
인터넷으로 연결된 컴퓨터들이 정보를 공유하는 거대한 정보 공간
-web site
인터넷에서 여러개의 whb page가 모인것으로,
사용자들에게 정보나 서비스를 제공하는 공간
(여러개의 web page가 모여서 구성)
-web page
HTML, CSS, Javascript 등의 웹 기술을 이용하여 만들어진,
하나의 인터넷 문서 (web site를 구성하는 하나의 요소)
🌫️ HTML
-HyperText Markup Language
웹페이지의 의미와 구조를 정의하는 언어
-Hypertext
웹 페이지를 다른 페이지로 연결하는 링크, 참조를 통해 사용자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
-Markup Language
태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어 (HTML, Markdown) = 프로그래밍 언어 X
🌫️ HTML Element
<p>my cat is very grumpy</p>- 하나의 요소는 여는 태그와 닫는 태그 그리고 그 안의 내용으로 구성됨
- 닫는 태그는 이름 앞에 슬래시가 포함되며 닫는 태그가 없는 태그도 존재
🌫️ HTML Attributes
<p class="editor-note">my cat is very grumpy</p>-
규칙
- 요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 함
- 하나 이상의 속성들이 있는 경우엔 속성 사이에 공백 으로 구분함
- 속성 값은 열고 닫는 따옴표로 감싸야함
-
목적
- 나타내고 싶지 않지만 추가적인 기능, 내용을 담고 싶을때 사용
- CSS가 해당 요소를 선택하기 위한 값으로 활용됨
🌫️ HTML 문서의 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>-
!DOCTYPE html : 해당 문서가 html 문서라는것을 나타냄
-
html : 전체 페이지의 콘텐츠를 포함
-
title : 브라우저 탭 및 즐겨찾기 시 표시되는 제목으로 사용
-
head: html 문서에 관련된 설명, 설정, 사용자에게 보이지 않음
-
body : 페이지에 표시되는 모든 콘텐츠
🌫️ HTML Text structure
<h1> main header</h1>-
문서의 최상위 제목
-
lists : ol, ul, li
-
글씨 기울임, 강조 : em, strong
🌫️ CSS
-cascading style sheet
웹 페이지의 디자인과 레이아웃을 구성하는 언어
h1 {
color: blue;
font-size: 15px;
}🌫️ CSS 적용방법
- 인라인 스타일
- 내부 스타일 시트
- 외부 스타일 시트
1. 인라인
<body>
<h1 style="color: blue; background-color: yellow;">HELLO WORLD!</h1>
</body>
2. 내부 스타일 시트
<style>
h1 {
color: blue;
font-size: 15px;
}
</style>
3. 외부 스타일 시트
<head>
<link rel="stylesheet" href="style.css" />
</head>
<!-- style.css -->
h1 { color : blue; font-size: 15px; }🌫️ CSS selectors
HTML 요소를 선택하여 스타일을 적용할 수 있도록 함
-
기본 선택자
-
전체(*) 선택자
-
요소(tag) 선택자
: 지정된 요소 선택 -
클래스(class) 선택자(.)
: 주어진 클래스 속성을 가진 모든 요소를 선택 -
아이디(id) 선택자(#)
: 주어진 아이디 속성을 가진 요소 선택, 문서에는 주어진 아이디를 가진 요소가 하나만 있어야 함 -
속성(attr) 선택자
-
-
결합자(combinators)
-
자손 선택자 (span)
: 첫번째 요소의 자손 요소들 선택 -
자식 선택자 ('>')
: 첫번째 요소의 직계 자식만 선택
-
<style>
/* 클래스 선택자 */
.green {
color: green;
}
/* id 선택자 */
#purple {
color: purple;
}
/* 자식 결합자 */
.green > span {
font-size: 50px;
}
/* 자손 결합자 */
.green li {
color: brown;
}
</style>🌫️ Cascade & Specificity
cascade (계단식)
- 동일한 우선순위를 갖는 규칙이 적용될 때 CSS에서 마지막에 나오는 규칙이 사용
h1 { color : red; } h1 { color : blue; }- 위의 예시 경우 blue가 적용된다.
Specificity(우선순위)
- 선택자 별로 정해진 우선순위 점수에 따라 점수가 높은 규칙이 사용
.make-red { color:red; } h1 { color:blue; }- 위의 예시에서 h1 태그 내용의 색은 red가 적용됨
우선순위가 높은 순
-
Importance
! important
-
우선순위
- 인라인 스타일 > id 선택자 > class 선택자 > 요소 선택자
- 소스 코드 순서
🌫️ 상속
기본적으로 css는 상속을 통해 부모 요소의 속성을 자식에게 상속함
-
상속되는 속성
- Text 관련 요소 (font, color, text-align),opacity, visibility 등
-
상속되지 않는 속성
-
box model 관련요소 (width, height, margin, padding, border, box-sizing, display)
-
position 관련 요소 (position, top/right/bottem/left,z-index)등
-
☔️ HTML 관련 사항
- 소문자 사용 권장
- 큰 따옴표 권장
- 에러 반환하지 않기에 작성시 주의
☔️ CSS 관련 사항
-
인라인 스타일 사용 하지 말것 (코드 복잡, 유지보수 힘듬)
-
속성은 되도록 class만 사용하도록 함
(예기치 못한 스타일 규칙 적용으로 유지보수 어려워질수 있음) -
문서에서 단 한번 유일하게 적용될 스타일 경우에만 id 선택
검색할때 반드시 전부 MDN 문서 확인할것 ⭐️
