웹구성 요소
- HTML : 설계도
- CSS : 디자인
- JavaScrpit : 기능, 효과
HTML 주요 태그
HTML
- Hyper Text Markup Language
- 웹 사이트에 보이는 출력 정보
태그 구성 요소
<열린태그속성="속성값"> 컨텐츠(내용) </닫힌태그>
기본 구조
<!DOCTYPE html>
<html>
<head> <!--요약 정보 (노출X)-->
<meta charset="UTF-8"> <!--문자 코드 (필수)-->
<title>웹프로그래밍</title> <!--제목-->
</head>
<body>
<!--눈에 보이는 정보 (이미지, 텍스트)-->
</body>
</html>
<a> 태그
- 링크 이동
- target : _self (현재 탭) , _blank(새 탭)
<a href="https://www.naver.com" target="_blank"> 네이버 </a>
<img> 태그
- alt : src 이미지 출력 못할 경우 텍스트로 대체
<img src="logo.png" alt="로고이미지">
<h> 태그
- 제목, 부제목
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<p> 태그
- 본문 내용
<p>본문 내용</p>
<ol> 태그
- 순서 있는 리스트
- li : 나열
<ol>
<li>메뉴1</li>
<li>메뉴2</li>
</ol>
<ul> 태그
- 순서 없는 리스트
공간 생성 시 사용태그
<header> , <nav> 태그
- <header> : 웹사이트 머리글
- <nav> : 메뉴 버튼 // <ul>, <li>, <a>와와 함께 사용
<header>
<nav>
<ul>
<li>홈</li>
</ul>
</nav>
</header>
<main> , <article> 태그
- <main> : 주요 내용. role="main" 필수
- <article> : 구역 설정. <h#> 필수
<main role="main"> <!--본문-->
<article> <!--정보-->
<h#>...</#h>
</article>
</main>
<footer> 태그
- 가장 하단 정보
<footer>
<div>
<p> 주소: ~ </p>
<p> 이메일: ~ </p>
</div>
<footer>
<div> 태그
- 임의 공간 생성
HTML 성격
Block 요소
- 줄 바꿈 가능 (공간 생성)
<p>Hello</p>
<p>Hello</p>
<!--Hello-->
<!--Hello-->
Inline 요소
- 한 줄 출력
<a>Hello</a>
<a>Hello</a
<!--Hello Hello-->
CSS 속성
CSS
- HTML로 작성된 정보 꾸며주는 언어
- 선택자 { 속성 : 속성값; }
- 선택자 : 디자인 적용 영역
- 속성 및 속성값 : 적용할 디자인. 세미콜로(;) 필수
속성 Property
h1 {
font-size: 20px;
font-family: sans-serif; <!--입력 순서대로 우선순위-->
color: blue;
background-color: yellow;
text-align: center;
}
CSS 연동 Style Sheet
- Inline : 태그 안에 적용
- Internal : <style> 태그 안에 적용
- External : <link> 태그로 부
<h1 style=“color: red;”> coding </h1>
<style> h1 {background-color: yellow;} </style>
<link rel = "stylesheet" href=“style.css”>
CSS 선택자
선택자
- HTML의 어떤 요소에 CSS를 적용할 것인가
- 종류 : Type , Class , ID
1. Type Selector
- 특정 태그에 스타일 적용
- h2 { color:red; }
2. Class Selector
- 클래스 이름으로 설정
- .coding { color:red; } // .coding 클래스
3. ID Selector
- #coding { color:red; }
부모 자식 관계
- <header> - <h1>, <p> : 부모-자식
- <h1> - <p> : 형
- style.css : 구체적으로 표기하기
- header의 h1 : header h1 {color:red;}
- footer의 h1 : footer h1 {color:red;}
<header>
<h1>hh1</h1>
<p>hp</p>
</header>
<footer>
<h1>fh1</h1>
<p>fp</p>
</footer>
캐스케이딩
CSS 우선순위 결정 요소
- 순서 : 나중에 적용한 속성값 우선순위가 높음
- 디테일 : 구체적일수록 우선순위 높음
- 선택 : style > id > class> type 순으로 우선순위 높음
CSS 주요 속성
width, height
- width : 넓이. 고정(%), 가변(px)
- height : 높이
- border : 테두리
<p class="paragraph"> ~~ </p>
.paragraph{ width:500px; height:500px;
border-style: solid; }
.paragraph{ font-size: 50px; ... }
.paragraph{ background-color: yellow; ... }
'1차 스터디' 카테고리의 다른 글
| 6. 자바스크립트 기초 문법 (0) | 2024.03.27 |
|---|---|
| 5. 자바스크립트 기초 (0) | 2024.03.27 |
| 4. 모바일 웹사이트 만들기: 미디어 쿼리 활용 (0) | 2024.03.23 |
| 3. 웹사이트에 생동감 부여하기 (0) | 2024.03.21 |
| 2. 웹사이트 레이아웃의 핵심 구성 요소 (0) | 2024.03.20 |