📍 HTML
✅HTML 정보
HTML은 요소로 구성되어있다.
• 태그 : 웹 문서에 정보를 정의하는 태그는 어느 부분이 제목, 텍스트 등 구별할 수 있게 꼬리표를 붙인다.
<p class=“hello”>Hello World</p>
*주의사항
<p><strong></p></strong> -(x)
<p><strong></strong></p> -(o)
<></> 여는 태그와 닫는 태그가 한 세트로 사용되어야 한다.빈 요소
• 닫는 태그가 없는 태그
<br >
<input type=“text”>
<img src=“” alt=“”>✅HTML 문서 해부
<!DOCTYPE html>
: 문서 유형으로 html Living Standard 문서라는 의미한다.
<html>
: 웹 문서의 시작을 알리는 태그이다.
lang 속성으로 해당 문서의 주 언어를 설정할 수 있다.
ex) “en“, “ko-KR” [언어코드(소문자)-국가코드(대문자)]
<head>
: 웹 브라우저가 알아야되는 문서 정보(메타데이터)를 입력한다.
<head>영역의 대부분 내용은 사용자에게 보이지 않지만 title, 파비콘, viewport 정보 등이 보인다.
- <meta> : 메타데이터로 어떤 목적을 위해 만들어진 데이터로 문서 정보가 들어있다.
- <title> : 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다. (페이지 정보 전달)
- <link> : 현재 문서와 외부 리소스의 관계를 명시한다.
ex)<link rel=“stylesheet” href=“style.css”>, 시트, 폰트, 파비콘 연결 가능,
rel: relations 관계, 대상 파일의 속성을 나타낸다. href: hyper-references
<body> : 사용자에게 보이는 영역📍 CSS
HTML의 스타일, 레이아웃 등을 꾸미는 역할
✅CSS 적용
• 내부 스타일 :
head 태그 안에style 태그사용HTML <head> <style> p{ color: white; background-color: black; } </style> </head> <body> <p>Hello world</p> </body>• 외부 스타일 :
link로 현재 문서와 외부 파일 연결HTML <head> <link rel="stylesheet" href="style.css"> </head> <body> <p>Hello world</p> </body> CSS /*style.css*/ p { color:yellow; background-color:black; }-> 다중 스타일 시트도 가능하다.
CSS 적용방법
• 인라인 스타일 : 태그 자체에 style 속성 사용하며, :hover와 같은 가상 요소 등에 스타일을 줄 수 없어 사용에 제한이 있다.
HTML
<section>
<h1 style=“color:red;”>Hello</h1>
<p style="color:red;">World</p>
</section>
<p style="color:white; background-color:black">Hello world</p>• 태그 선택자
HTML
<section>
<h1>Hello</h1>
<p>World</p>
</section>
CSS
h1{color: red;}
h1{color: red;}• 그룹 선택자(,)
HTML
<section>
<h1>Hello</h1>
<p>World</p>
</section>
CSS
h1, p{color: red;}• 상속
HTML
<section>
<h1>Hello</h1>
<p>World</p>
</section>
CSS
section{color: red;}✅ CSS 선택자
기본 선택자
• 전체 선택자
: head를 포함한 모든 요소를 선택한다.
* {
font-size: 10px;
}• 유형(타입) 선택자
: 특정 태그를 선택한다.(태그 선택자, 요소 선택자라고도 한다.)
h1 {
backgrount: red;
}• 아이디 선택자 (#)
: id 특성에 따른 요소를 서낵한다. HTML 페이지 내에 id는 하나만 존재해야 하기 때문에 재사용성이 떨어진다. 따라서 JavaScript, 해시 링크와 함께 사용되는 경우가 많다.
/* HTML */
<header id="header">
</header>
/* CSS */
#header {
padding: 1em;
}• 클래스 선택자 (.)
: class 특성을 가진 모든 요소를 선택한다. 아이디 선택자와 다르게 재사용성이 높다.
/* HTML */
<h1 class="selector"> Hello</h1>
<p> Hello World </p>
<p class="selector"> World</p>
/* CSS */
.selector {
color: green;
}• 특성 선택자 ([ ])
: 주어진 특성을 가진 모든 요소를 선택한다.
[class^="btn"]{
background: royalblue;
}그룹 선택자
• 그룹 선택자 (,)
: 선택자 그룹을 생성한다.
/* HTML */
h1 { color: red; }
h2 { color: red; }
h3 { color: red; }
/* CSS */
h1, h2, h3{ color: red; }복합 선택자
• 자손 선택자 ( )
: 자식, 자손 모두 선택할 수 있다. 공백을 통해 구분한다.
section p {
color: red;
}• 자식 선택자 (>)
section > p {
font-size: 10px;
}• 일반 형제 선택자 (~)
p ~ span {
background: royalblue;
}• 인접 형제 선택자 (+)
h1 + p {
text-decoration: wavy;
}✅CSS 단위
단위에는 절대 길이 단위인 px와 상대 길이 단위인 %, vw, vh, vmin, vmax, em, rem이 있다.
• px: 고정된 값이라 직관적으로 사용할 수 있지만 디바이스 별로 픽셀 밀도가 다르다. 그래서 다른 위치, 크기로 보이는 문제가 발생한다.
• vmin, vmax : 화면의 넓이와 높이 중 vmin은 작은 값을, vmax는 큰 값을 기준으로 하는 백분율이다.
• em : 부모 요소로부터 상속받은 요소의 글자 크기를 기준으로 하는 배수 단위이다.
• rem : 최상의 요소인 <html>의 글자 크기를 기준으로 하는 배수 단위이다. (html의 기본 폰트 사이즈는 16px)
📍 HTML/CSS 실습
✅HTML - 텍스트와 관련된 태그
• h1 ~ h6
: 제목을 표현하는 Heading 태그로 h1부터 h6까지 있다. 사용할 때 h1부터 h6까지 순서대로 작성해야 한다. (HTML 파일에서 h1는 한 번만 사용하기!)
순서대로 작성하지 않는 경우(x)
<h1>HTML/CSS</h1>
<h3>title</h3>
<h2>HTML</h2>
<h2>CSS</h2>
<h4>style</h4>
----------------------------
순서대로 작성한 경우(o)
<h1>HTML/CSS</h1>
<h2>HTML</h2>
<h3>title</h3>
<h2>CSS</h2>
<h3>style</h3>• a
: 인라인 요소로 href, terget, download 속성을 가진다.
href 속성값
<a href="test.html">test.html 이동</a>
<a href="mailto:google@gmail.com">이메일</a>
<a href="tel:010-0000-0000">010-1234-5678</a>
target 속성값
<a href="test.html" target="_self">test.html 현재 페이지- 기본값</a>
<a href="test.html" target="_blank">test.html 새 탭</a>
<a href="test.html" target="_parent">test.html의 부모 페이지로, 없으면 _self와 동일</a>
<a href="test.html" target="_top">test.html에서 최상위 페이지로</a>
download
<a href="b.html" download>b.html 파일 다운로드</a>• p
: 하나의 문단을 나타낸다.
• br : 줄을 나눈다. 되도록이면 span 태그와 CSS display 속성, wbr 태그를 사용하는 것을 권장한다.
• wbr
: 줄 바꿀 수 있는 위치를 나타낸다. 언어에 따라 속성을 사용해야 한다.
word-breal: 텍스트기 콘텐츠 밖으로 오버플로우가 될 때 줄을 바꿀지 지정
keep-all: 한중일 텍스트 경우, 줄 바꿀 때 단어를 끊지 않는다.
.ko{
word-break:keep-all;
}
.en{
word-break:break-all;
}• code
: 언어가 외국어로 설정 되었을 때 code 태그를 사용하지 않고 작성 코드는 번역 시 같이 번역된다. code 태그를 사용한 코드는 번역되지 않는다.
• pre : 고정 폭 글꼴, 공백 등 그대로 유지한다. 즉, HTML에 작성한 내용 그대로 표현할 수 있다.
• strong
: 굵은 글꼴로, 중대하거나 긴급한 콘텐츠를 나타낸다.
• em
: 텍스트의 강세를 나타낸다. 기울임 꼴이 적용된다.
• address
: 해당 콘텐츠의 연락처 정보를 나타낸다. (ex. 학원, 병원, 식당 등 직접적인 연락처 필수인 곳)
• q : 짧은 인용문 / blockquote : 긴 인용문 /cite : 저작물 표기 / sup : 지수, 표기 등(위 첨자) / sub : 변수, 화학식 등(아래 첨자)
✅CSS - 텍스트 꾸미기
• color 색상
: 폰트의 색상을 나타낸다. (투명한 색: transparent)
ex) color: #000000;
❗ 저시력 시각 장애를 위해 폰트 색상과 배경의 명도 대비도 중요하다!!! 최소 4.5:1 명도 대비
• font-family
: 글꼴의 종류로 link를 통해 삽입하거나 import로 삽입하는 방법이 있다.
(+ 사용자 컴퓨터에 특정 폰트가 설치되어 있지 않아도 @font-face 속성을 사용하면 폰트를 사용할 수 있다.)
• link 삽입
HTML
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<style>
body {font-family: 'Montserrat', sans-serif;}
</style>
</head>
import 삽입
CSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {font-family: 'Montserrat', sans-serif;}• font-size 글꼴 크기
: px, em, rem과 같은 단위를 사용한다.
• font-weight
: 텍스트 굵기를 설정하는 값이다.
normal : 기본 / bold : 굵게 / lighter : 부모 요소보다 더 가벼운 굵기 / bolder : 부모 요소보다 더 두꺼운 굵기 / 100-900
• text-transform
: 영문을 대소문자로 바꿀 수 있다.
none : 변형 방지 / uppercase : 모든 문자를 대문자로 / lowercase : 모든 문자를 소문자로 / capitalize : 모든 단어의 첫글자를 대문자로
• text-decoration
: 단축 속성으로 text-decoration을 더 상세히 설정하기 위해 -color, -line, -style, -thickness이 올 수 있다.
.solid {
text-decoration: red line-through solid 5px;
}
.dashed {
text-decoration: yellow underline overline dashed auto;
}
.wavy{
text-decoration-color: green;
text-decoration-line: underline overline line-through;
text-decoration-style: wavy;
text-decoration-thickness: 10px;
}