[HTML, CSS] 웹 사이트의 정보와 디자인
1. 웹을 구성하는 요소
웹 구성 요소
- HTML : 설계도 역할 (웹의 구조 잡기)
- CSS : 디자인 및 스타일링 (색상변경, 공간크기 설정 등)
- JavaScript : 기능적인 역할 (동적인 효과 부여)
웹 사이트 제작시 고려 사항
1. 웹 표준
: 웹 사이트 작성 시 따라야 하는 공식 표준 및 규격 (강제성은 없지만, 웹 표준을 지킬 수록 검색 엔진에 노출될 확률 높아짐)
2. 웹 접근성
: 장애 여부와 상관없이 모두 웹 사이트 이용할 수 있는 방식 (장애를 가진 사람들이 이용하는 데에 무리가 없어야 함)
3. 크로스 브라우징
: 모든 브라우저 및 기기에서 웹 사이트가 정상적으로 작동하도록 하는 기법
2. HTML 기본 태그
HTML
: 웹 사이트의 특정 구역을 설정할 때 사용하는 언어
HTML 태그 구성 요소 (4가지)
<열린태그 속성 = "속성값"> 컨텐츠 </닫힌태그>
- 태그명 : 대부분 열린태그와 닫힌태그로 구성
- 속성 : 태그가 갖고 있는 추가 정보 + 디자인
- 속성값 : 무엇을 수행할 지에 대한 구체적인 명령
- 컨텐츠 : 태그 사이의 내용
HTML 문서 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<h1 style="color:navy">안녕 엘리스!</h1>
</body>
</html>- <!DOCTYPE html>
: html5 라는 신조어로 .html 파일을 구성하겠다 라는 의미 (과거에 사용된 언어는 일부 사용할 수 없음)
- <html> </html>
: 모든 html 코드는 태그 안에 작성
: <html>태그 안에는 <head>와 <body>태그로 구성
- <head> </head>
: html의 간단한 요약 정보가 포함되어 있음 (사용자에게 직접적으로 보여지지는 않음)
- <meta charset="UTF-8>
: 문자를 무엇으로 설정할 지 정해주는 역할
(UTF-8 : 모든 문자 코드 보여줄 때 사용 / UTF-8 쓰지 않으면 한글 깨질 수 있음)
- <title> </title>
: 브라우저 상단 탭의 제목 결정
- <body> </body>
: 실제 사용자가 웹 사이트에 접속했을 때 보여지는 정보들 (웹 사이트 내용)
- <h1 style="color:navy"> </h1>
: 타이틀 정보를 입력할 때 사용 (style을 지정해서 텍스트를 꾸며주는 속성 갖음)
HTML 기본 태그
1. <a> 태그 : 글자 또는 이미지 클릭 → 다른 사이트 이동하는 태그
<a href="https://www.naver.com" target="_blank">네이버</a>
- href : 이동할 사이트의 url 주소 지정
- target : 페이지 이동 방식 결정 ("_blank" : 새 탭 띄워 이동 / "_self" : 현재 탭에서 이동 [기본값])
- 네이버 : 자동으로 언더바 생성, 글씨색은 파란색, 커서 갖다 대면 클릭할 수 있음
2. <img> 태그 : 이미지 삽입 (닫힌태그X)
<img src="logo.png" alt="회사로고">
- src : 이미지 파일 경로
- alt : 이미지 출력 못할 경우, 텍스트 정보("회사로고")로 대체 / 웹 표준 및 웹 접근성 고려(스크린리더가 알려주는 정보)
+ width와 height도 설정O
: width나 height 둘 중에 하나 설정하면 → 나머지 하나는 원본 이미지 비율에 맞춰서 자동으로 설정
: width와 height 둘 다 설정하면 → 원본 이미지 비율 무시
3. <h> 태그 : 제목이나 부제목 표현
<h1>Hello World</h1>- 종류 : <h1> ~ <h6> (숫자 클 수록 → 크기 작음)
- <h1>의 경우 html 문서에서 한 번만 사용됨
4. <p> 태그 : 긴 문장 또는 문단 넣을 때 사용
<p>Hello World! Nice to meet you!</p>
5. <ol>, <li> 태그
<ol>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ol>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>- <ol> : 순서가 있는 리스트 생성 (1. 메뉴1 2. 메뉴2 3. 메뉴3 ...)
- <ul> : 순서가 없는 리스트 생성 / 메뉴 버튼 만들 때 사용 (• 메뉴1 • 메뉴2 • 메뉴3 ...)
- <li> : 항목을 나열할 때 사용
3. 구조를 잡을 때 사용하는 태그 (<body> 태그 안에)
1. <header> 태그 : 웹 사이트 상단 (대부분 로고와 메뉴가 들어감)
<header>
<h1> <!-- 가장 중요한 정보이기 때문에 h1 사용 -->
<a> <!-- 클릭을 해야 하기 때문에 a 사용 -->
<img src=“경로”> <!-- 회사 로고 이미지 들어가야 하기 때문에 img 사용 -->
</a>
</h1>
<nav> <!-- 내부 메뉴 버튼 담는 공간 -->
<ul> <!-- 메뉴는 <ul>과 <li>로 나타냄 -->
<li><a href=“#”>메뉴1</a></li> <!-- 클릭해야하기 때문에 a 사용 -->
<li><a href=“#”>메뉴2</a></li> <!-- 이동해야할 링크가 미정일 경우 href에 #을 넣음 -->
<li><a href=“#”>메뉴3</a></li>
</ul>
</nav>
</header>
2. <main role="main"> 태그 : 웹 사이트 본문
<main role=“main”> <!-- *role=“main” : 이 부분이 main 역할을 하고 있음을 알려줌 -->
<article> <!-- **문서 내 독립적인 콘텐츠 위한 공간 -->
<h2>타이틀</h2> <!-- 공간을 대표하는 타이틀 ***h태그 들어가 있어야 함 -->
<p>본문</p> <!-- 본문 내용도 있을 경우 같이 작성 -->
</article>
</main>
3. <footer> 태그 : 웹 사이트 하단
<footer>
<div> <!--임의의 구역/작은 구역들을 쪼개서 배치할 때 사용-->
<p>회사 주소</p>
</div>
<div>
<p>010-1234-5678</p>
</div>
</footer>
4. HTML 태그의 두 가지 성격
| Block 요소 | Inline 요소 |
| y축 정렬 형태 (밑으로 내려감) | x축 정렬 형태 (한 줄에 출력) |
| 공간 만들 수 O (width, height 설정 O / 공간 만드는 태그 모두 해당) | 공간 만들 수 X (width, height 설정 X) |
| 상하 배치 O (margin, padding 사용 O) | 상하 배치 X (margin, padding 사용 X) |
| 좌우 배치 O | 좌우 배치 O |
5. CSS
CSS
: 정보와 디자인 분리
: 레이아웃과 스타일 정의
CSS 구성요소 (3가지)
선택자 { 속성: 속성값; }
- 선택자 : 디자인 적용 대상
- 속성 : 어떤 디자인 적용할 지
- 속성값 : 구체적인 명령 (;은 필수 / 쓰지 않으면 예상치 못한 에러 발생)
CSS 연동 방법 (3가지)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
<style> <!-- 2. Internal 방식 -->
h1 {color: red;}
</style>
<link rel="stylesheet" href="index.css"> <!-- 3. External 방식 -->
</head>
<body>
<h1 style="color: blue;">Hello world!</h1> <!-- 1. Inline 방식 -->
</body>
</html>1. Inline 방식 : 태그 안에 style 사용해서 속성과 속성값 직접적으로 입력
2. Internal 방식 : <style> 태그를 <header>안에 넣어서 작성
3. External 방식 : <link> 태그로 외부의 css 파일 불러오기 (rel : 정보에 대한 성격 지정)
→ 가독성이 높고, 유지보수가 쉬움
6. CSS 선택자
선택자
: HTML의 어떤 요소를 선택하여 CSS를 적용할지
- Type 선택자 : HTML 태그
- Class 선택자 : 태그 별명 / .클래스이름
- Id 선택자 : 태그 이름 / #아이디이름
7. 부모 자식 관계
부모 : <header>
자식 : <h1>, <p>
- 자식 <h1>, <p>에 CSS 속성을 따로 지정 X 경우 : 부모 속성 적용 O
- 자식 <h1>, <p>에 CSS 속성을 따로 지정 O 경우 : 자식의 속성 적용 O (부모도 자식 속성 적용)
부모 : <header> 자식 : <h1>, <p>
부모 : <footer> 자식 : <h1>, <p>
- 자식으로 같은 태그를 갖고 있을 경우 : 원하는 지역에만 CSS를 적용시키 위해 부모를 구체적으로 표기
ex) header h1 {color: red;}
8. 캐스케이딩
CSS 우선순위 결정하는 요소 (3가지)
1. 순서 (작성된 순서)
: 동일한 level 상에서, 나중에 작성한 속성값 적용
2. 디테일 (얼만큼 상세하게 CSS 선택자를 표기했는지)
: 더 구체적으로 작성된 선택자 적용 ex) header h1 {color: red;}
3. 선택자 (선택자의 종류에 따라서)
: *style > id(#) > class(.) > type(태그) 순으로 먼저 적용
: 유지보수 시에 우선순위 사용해서 변경하면, 원본코드 유지할 확률이 높음
9. CSS 주요 속성
width, height
- 특정 공간 설정할 떼 사용
- width : 넓이 / 고정값(px), 가변값(%) → cf.) %의 기준점 = 부모 기준으로 설정
- height : 높이
font
- font-size : 글자 크기
- font-family : 글꼴
→ Arial, ... , sans-serif 처럼 여러 개 입력해주는 것이 좋음 (브라우저마다 지원하는 폰트가 달라서 안되면 다음 글꼴 적용)
→ 항상 제일 마지막은 sans-serif 적어주기 [기본값]
- font-style : 글자 기울기 (italic)
- font-weight : 글자 두께 (bold)
→ 100~900 사이 입력 (100단위로 올라감 / 숫자는 클 수록 굵음)
border
- border-style : 테두리 스타일
→ solid : 실선 / dotted : 점선
- border-width : 테두리 굵기 (고정값 px 많이 사용)
- border-color : 테두리 색상
cf.) border : solid 10px red; → 한 줄로 표현 O (띄어쓰기로 구분, 순서상관X)
background
- background-color : 배경색
- background-image : 배경이미지
→ url(이미지 경로) : 괄호 안에 이미지 경로 + 확장자 명 작성
- background-repeat : 배경이미지 반복 여부 (기본값 : repeat)
→ repeat-x : x축으로 반복
→ repeat-y : y축으로 반복
→ no-repeat : 반복X
- background-position : 배경이미지 좌표 변경 시 사용
→ top, bottom, center, left, right
→ right top 이렇게 띄어쓰기로 구분해서 같이 쓰기도 함 (오른쪽 상단)
→ 추가로 100px, 50% 이렇게도 표현 가능
cf.) background: yellow url(이미지경로) no-repeat left; → 한 줄로 표현 O (띄어쓰기로 구분, 순서상관X)
'공부 > HTML, CSS' 카테고리의 다른 글
| [HTML, CSS] Flex (0) | 2022.10.01 |
|---|---|
| [HTML, CSS] 모바일에 대응되는 웹사이트 (0) | 2022.09.16 |
| [HTML, CSS] Transform, Transition, Animation (0) | 2022.09.16 |
| [HTML, CSS] HTML, CSS 태그 살펴보기 (0) | 2022.09.15 |
| [HTML, CSS] 웹사이트 레이아웃에 영향을 미치는 요소 (0) | 2022.09.13 |
댓글