728x90
[HTML/CSS 기초 ]
1. 웹사이트에 정보와 디자인을 입혀보자
-> HTML, CSS 란?
-> 웹사이트의 레이아웃
-> 웹사이트의 움직임
-> 모바일에 대응하는 웹사이트
-> Contents
1) 웹을 구성하는 요소
-> HTML , CSS , JavaScript
2) HTML 주요 태그 살펴보기
-> HTML : Hyper Text Markup Language
-> 태그명 : HTML이 갖고 있느 고유의 기능
<열린태그></닫힌태그> 형태로 입력
-> 컨텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용물
-> 속성 : HTML 태그가 갖고 있는 추가 정보
-> 속성값 : 어떤 역할을 수행할지 구체적인 명령을 진행하는 것
-> HTML 문서의 기본 구조
- <!DOCTYPE html>
HTML5라는 신조어로 문서를 선언하는 태그
- <html> ... </html>
HTML 문서의 시작과 끝을 의미
모든 HTML 태그들은 <html> 태그 안쪽에 입력
- <head>...</head>
웹사이트의 간단한 요약정보를 담는 영역
웹사이트에서 노출되지 않는 정보
- <body>...</body>
웹사이트에서 눈에 보이는 정보를 담는 영역
이미지나 텍스트처럼 출력되는 정보
- <meta charset="UTF-8">
character setting의 약자를 나타내는 문자코드
모든 문자를 웹브라우저에서 깨짐 없이
표시하겠다는 의미
- <title> ...</title>
웹사이트 탭에 나타나는 제목을 적는 태그
- <a href="http://test.com" target = "_blank"> </a>
글자나 이미지 클릭 시 다른 사이트로 이동 시키는 태그
열린 태그와 닫힌 태그 사이에 컨텐츠 입력
-> href 속성
HTML 연결할 페이지의 주소 지정
-> target 속성
어떤 방식으로 페이지로 이동할지 결정
- "_blank"
새 탭을 띄워서 웹사이트를 전환
- "_self"
현재 탭에서 웹사이트를 전환(디폴트)
- <img src="logo.png" alt="회사로고">
-> img 태그
정보성을 갖고 있는 이미지를 삽입, 닫힌 태그 없음
-> src 속성
삽입할 이미지 파일 경로
-> alt 속성
웹사이트가 이미지를 출력하지 못했을 경우, 텍스트 정보로 대체
- <h> 태그
<h1> ~ <h6>
heading 의 약자로 제목이나 부제목을 표현
숫자값이 클수록 폰트 사이즈가 작음, 즉 숫자는 정보의 중요도를 나타냄
h1 태그는 가장 중요한 정보를 담으므로 하나의 html문서에서 한번만 사용됨
- <p> 태그
Paragraph 의 약자로 본문내용 을 표현
웹사이트의 중요 정보를 담는 태그
나타내고자 하는 내용을 열린 태그와 닫힌 태그사이에 입력
- <ol> <ul> <li> 태그
Ol : Ordered list의 약자로 순서가 있는 리스트 생성
ul : unordered list 의 약자로 순서없는 리스트 생성
li: <ol> 과 <ul> 의 각 항목을 나열 할 때 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹프로그래밍</title>
</head>
<body>
</body>
</html>
3) 공간을 만들 때 사용하는 태그 ( 구조를 잡을 때 사용하는 태그 )
-> HTML 태그 구성 요소
- 목차 / 본문 / 부록
-> <header> <nav> 태그
- <header> 태그
웹사이트의 머리글을 담는 공간
- <nav> 태그
메뉴 버튼을 담는 공간 (navigation)
<ul>, <li>, <a>와 함께 사용
-> <main> 태그
문서의 주요 내용을 담는 태그
IE는 지원하지 않으므로 role="main" 속성 필수 입력
<main role=“main"> <!--본문영역-->
<article> <!--정보영역-->
...
</article>
</main>
-> article 태그
문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그
태그 내에 구역을 대표하는 타이틀 <h#>태그가 존재해야함
-> <footer> 태그
가장 하단에 들어가는 정보를 표기할 때 사용
-> <div> 태그
임의의 공간을 만들 때 사용됨
4) HTML의 두가지 성격
-> Block 요소와 Inline 요소
- > block 요소
<p> hello Elice </p>
<p> hello Elice </p>
<p> hello Elice </p>
위와 같이 적으면 블럭처럼 줄바꿈 현상이 나타난다.
y축으로 세로로 정렬된다.
공간을 만들 수 있다 . 상하배치 작업 가능
-> inline 요소
<a>Bye Elice</a>
<a>Bye Elice</a>
<a>Bye Elice</a>
x 축 정렬 형태로 출력 ( 한 줄에 출력 )
공간을 만들 수 없고, 상하 배치 작업 불가능
5) CSS 주요 속성 살펴보기
- Cascading Style Sheet 의 약자
-> 정보(HTML)와 디자인(CSS)의 분리
-> 문서의 레이아웃과 스타일 정의
-> HTML로 작성된 정보를 꾸며주는 언어
추천인 코드 : o6i4B3y95 : 앨리스트랙 참여 링크
#엘리스트랙 #엘리스트랙후기 #온라인코딩부트캠프 #온라인코딩학원 #백엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #DOCKER #백엔드 #자바스프링 #스프링강의 #백엔드인강 #RESTAPI #스프링개발자
728x90
'Elice --Cloud--Track > 4~7 주차' 카테고리의 다른 글
| 4주차 블로그 챌린지-js , DOM (1) | 2023.12.17 |
|---|---|
| 4주차 블로그 챌린지-DB,SQL (0) | 2023.12.15 |
| 3주차 블로그 챌린지 - java - map (0) | 2023.12.10 |
| 3주차 블로그 챌린지 (0) | 2023.12.10 |
| Test (0) | 2023.12.03 |
