🙈 들어가기 전
정말 아무것도 모른다는 생각으로 KDT 웹 6기 수업의 회고록 + 공부 기록을 남겨보려고 한다.
매일 하면 좋겠지만,,,
"이런 것까지 적어둔다고?"
라는 생각이 들 수도 있기에 깔끔하고 간단한 글이 될 것 같지는 않다
<사전 지식>
HTML : 뼈대
- 텍스트, 이미지, 입력창 등 웹에서 보이는 요소(Element)를 정의한다.
CSS : 디자인
- HTML에서 정의된 요소에 디자인(색, 간격, 크기 등)을 부여한다.
JS : 웹의 모든 동작을 처리
- 버튼을 누르거나 서버와 통신할 때 등의 동작처리한다.
HTML 구조 설명
<!DOCTYPE html>
<!--HTML 문서는 반드시 !DOCTYPE으로 시작하여 문서 형식을 HTML5로 지정-->
<html>
<head>
<!--body 태그의 정보를 읽기 위한 정보(=메타 정보, 제목, 브라우저의 크기 등등)-->
<meta charset = "utf-8">
<title>Hello world</title>
</head>
<body>
<!--웹 브라우저에 출력되는 모든 요소-->
<h1>Hello world</h1>
<p>Hi</p>
</body>
</html>HTML 문서는 반드시 <!DOCTYPE html>로 시작하여 문서 형식을 HTML5로 지정해줍니다.
2번 라인부터는 <html> 과 </html> 사이에 실질적으로 문서에 필요한 정보들이 작성됩니다.
<head>와 </head> 사이에는 <body>태그의 정보를 읽어 들이기 위한 제목, 저장 방식, 브라우저의 크기를 넣어줍니다.
<body> 와 </body>사이에는 웹 브라우저에 출력되는 모든 요소가 위치합니다.
<head> 태그
메타 데이터(=데이터를 위한 데이터)를 포함하는 태그로 언제나 <head> 내부에 위치합니다.
<base>, <link>, <script>, <style>, <title> 요소와 같은 다른 메타데이터 관련 요소들이 나타낼 수 없는 다양한 종류의 메타 데이터를 제공할 때, 사용되며, 웹 페이지에서 유일하게 존재합니다.
HTML 문서의 title, style, link, script, meta에 대한 데이터로 화면에 표시되지 않습니다.
<!DOCTYPE html>
<html lang="en">
<!--화면에 보이는 요소들 외의 모든 것들(메타정보, 탭에 보이는 제목 설정 등)를 담는 공간-->
<head>
<!-- meta : 페이지 설명, 키워드, 저자 화면 크기 등의 정보 주로 브라우저 또는 검색 엔진에서 사용 -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--브라우저 탭에 보이는 제목-->
<title>Hello World</title>
<!--CSS를 로드하는 태그 : link, style-->
<!--link : 외부 리소스(CSS, 폰트)등과 연결 정보를 정의 -->
<link href="style.css" rel="stylesheet" />
<!--style : HTML 문서의 Style 정보 정의 -->
<style type="text/css">
html {
background-color: red;
}
</style>
<!--script : JavaScript 정의-->
<!--외부에서 파일을 가져오거나 직접 내부에서 입력할 수 있음-->
<script type="text/javascript" src="script.js" />
<script type="text/javascript">
console.log("Hello World");
</script>
</head>
<body>
<!--HTML 문서의 내용을 담는 태그-->
</body>
</html>- meta : 페이지 설명, 키워드, 저자, 화면 크기 등의 정보, 주로 브라우저 or 검색 엔진에서 사용한다.
- title : HTML 문서의 제목
- style : HTML 문서의 Style 정보 정의
- link : 외부 리소스와의 연결 정보를 정의 (CSS 파일 연계)
- script : JavaScript 정의
<body> 태그
HTML 문서의 내용을 담는 태그이고 웹페이지를 구성하는 대부분의 요소가 body 태그 내에서 기술됩니다.
HTML 기본 문법
요소(Element) : HTML 요소(Element) 는 opening tag와 closing tag사이에 위치한 내용으로 구성
중접(Nested) : 중첩 관계 (부모자식 관계) 로 웹페이지의 구성
ex)
<html>은 <head>와 <body>를 포함하고,
<head>는 <meta>와 <title>요소를
<body> 는 <h1>, <p>를 포함한다.
빈 요소(Empty) : 빈 요소는 내용이 없고, 속성만 소유하고 있는 요소
- 빈 요소는 안정성 때문에 <태그> 보다는 <태그/> 사용을 권장합니다.
ex) <br/>, <hr/>, <img/>, <input/>, <link/>, <meta/>
속성(Attribute) : 요소의 성질, 특징을 정의하고 추가적인 이미지 파일의 경로나 크기 등을 제공
<태그 속성 = "값"> 내용 </태그>
주석(Comments) : 코드 설명, 화면X
tag 종류
제목태그 <h1~6> </h1~6>
제목을 적기 위한 태그로 Heading 의 약자로 h를 사용합니다. 제목의 역할을 하는 만큼 자동으로 줄 바꿈이 이루어집니다.
웹 검색 엔진이 제일 먼저 검색하는 태그로 하나의 HTML 문서에는 하나의 h1 태그를 권장합니다.
본문 태그 <p> </p>
본문을 적기 위한 태그로 paragraph 의 약자로 <p>를 사용합니다.
- 줄 바꿈 : O
+ <p> 태그 안에는 엔터 적용이 되지 않지만 <pre> 태그는 ↲ Enter 가 적용됩니다.
+ <p> 태그 안에 를 사용해서 띄어쓰기를 할 수 있습니다.
<h4>p태그 사용</h4>
<p>ʕ•ᴥ•ʔʕ•ᴥ•ʔ ʕ•ᴥ•ʔ ʕ•ᴥ•ʔ</p>
<hr/>
<h4>p태그 안에 사용 </h4>
<p>ʕ•ᴥ•ʔʕ•ᴥ•ʔ ʕ•ᴥ•ʔ ʕ•ᴥ•ʔ</p>
<hr/>
<h4> pre 태그 사용</h4>
<pre>
ʕ•ᴥ•ʔ ʕ•ᴥ•ʔ
ʕ•ᴥ•ʔ ʕ•ᴥ•ʔ
pre tag 안에 쓰면 엔터도 적용이 됩니다.
</pre>
줄 바꿈 태그 <br/>
줄바꿈할 때 사용하는 태그입니다.
목록 <ul> </ul> or <ol> </ol>
<ul> : 순서가 없는 목록
<ol> : 순서가 있는 목록
- <ol>은 속성을 사용할 수 있다.
- <ol type = " "> : 말머리 기호 변경 (1, A, a, I, i)
- <ol start = " "> : 시작 값 변경
- <ol reversed> : 역순
<h3>오늘의 할 일</h3>
<!-- ul type : disc(default), square, circle, none -->
<ul type="circle">
<li>html 공부하기</li>
<li>저녁먹기</li>
<li>집에 가기</li>
</ul>
<h3>카페라떼를 만드는 방법</h3>
<!-- ol type : 1(default), a, A, i , I -->
<ol type="1">
<li>우유를 컵에 넣습니다.</li>
<li>얼음을 넣습니다.</li>
<li>에스프레소 샷을 넣어주면</li>
<li>완성~!</li>
</ol>
수평 줄 <hr/>
수평으로 줄을 그어줍니다.
이미지 삽입 <img>
속성 값 중 하나인, src를 사용하며 이미지 경로를 찾지 못했을 경우를 대비하여 alt 속성이 중요합니다.
heigh, width 로 높이와 너비를 설정하고 하나만 써줬을 때는 원본 비율을 유지하여 적용됩니다.
절대 경로는 특정 컴퓨터의 파일 위치를 정확히 알려주지만, 이미지의 경로가 바뀌거나 서로 다른 OS를 다룰 때는 항상 위치를 바꿔야하는 단점이 있습니다. 이 단점은 상대 경로를 사용해 해결할 수 있습니다.
<img
src="이미지 주소"
alt="사진에 대한 설명, 경로를 찾지 못했을 경우를 대비해서 항상 써주기!"
width="200"
height="200"
/>
<!-- 상대경로 -->
<img src="./img/곰.jpg" alt="곰" width="200" />
<!-- 절대경로 -->
<img src="/HTML/img/곰.jpg" alt="곰" width="200" />
하이퍼링크 <a>
Anchor의 약자인 a를 사용한다. 속성 값은 href 로 이동할 페이지의 링크를 알려주고 target 으로 문서가 열릴 위치를 표시합니다. ( _blank / _self / _ parent / _top)
<a href="http://www.naver.com" target="_blank">네이버로 이동</a>
<a href="http://www.naver.com"
title="mouser 커서를 올리면 나타나는 문장입니다.">네이버로 이동</a>문자 꾸미기 태그
<h4><b>b : 진한 글씨</b></h4>
<h4><strong>strong : 진한 글씨 + semantic 한 의미</strong></h4>
<h4><i>i : 기울어진 글씨</i></h4>
<h4><em>em : 기울어진 글씨</em></h4>
<h4><del>del : 중간 줄 </del></h4>
<h4><u>u : 밑줄</u></h4>
사용자 입력 Form 태그
입력 값 <input>
type : button, text, password, checkbox, radio, date, color, range, file
type="button" : 버튼 생성
<input type="button" value="버튼" />
type = "text" : 텍스트 입력 값
<!-- <label> 태그는 라벨을 정의할 때 사용한다.
- for 속성와 id 속성의 값을 같게 하여 결합할 수 있다. -->
<label for="textInput">Id</label>
<input type="text" id="textInput" />+ <intput>태그를 도와주는 <label> 태그
<label> 태그사이에 위치한 text, checkbox, radio 등의 선택 영역이 텍스트로 범위가 확장됩니다.
ex. radio 의 동그라미나, checkbox의 박스를 누르지 않고 옆에 텍스트를 눌러도 적용되는 점
<label for =""> 속성을 사용하여 <input id =""> 태그의 id 값과 for 값을 일치시켜 사용하면 됩니다.
type = "password" : 패스워트 값, 입력값을 자동으로 안보이게 처리
type = "email" : 이메일 주소 입력 값
- placeholder : 사용자가 적절한 값을 입력할 수 있도록 힌트값을 보여줍니다.
<input type="email" placeholder="example@nave.com" />
type = "checkbox" : 여러 선택지 중 여러 개를 선택할 수 있는 체크 박스를 생성
- Name : 체크 박스의 이름, 같은 분류의 체크 박스는 같은 이름으로 설정 (영어로 설정, 첫글자에 숫자X)
- Value : 체크 박스가 실제로 전달하는 값 지정
- Checked : 화면 최초 로딩 시에 선택된 상태로 나타남
<h5>다음 중 input type이 아닌 것은? (모두 고르세요.)</h5>
<input type="checkbox" name="input" />text
<input type="checkbox" name="input" />bread
<input type="checkbox" name="input" checked />date
<input type="checkbox" name="input" disabled />click
<input type="checkbox" name="input" />img다음 중 input type이 아닌 것은? (모두 고르세요.)
text bread date click img
type = "radio" : 여러 선택지 중 하나만 선택 가능한 라디오 버튼을 생성
- Name : 라디오 버튼의 이름, 같은 name을 가지는 라디오 버튼은 하나만 선택이 가능
- Value : 라디오 버튼이 실제로 전달하는 값 지정
- Checked : 화면 최초 로딩시에 선택된 상태로 나타남
<h5>다음 중 img 태그의 속성인 것은?</h5>
<input type="radio" name="img" id="title"/>
<label for="title">title</label>
<input type="radio" name="img" id="alt" />
<label for="alt">alt</label>
<input type="radio" name="img" id="mouse" />
<label for="mouse">mouse</label>
<input type="radio" name="img" id="value" />
<label for="value">value</label>
<input type="radio" name="img" id="href" /> <label for="href">href</label>다음 중 img 태그의 속성인 것은?
type = " date" : 특정 날짜를 선택
- Name : 날짜 선택 폼 이름을 지정
- type = "datetime-local" 시간 선택 가능
<input type="date" /> <br/>
<input type="datetime-local" />
textarea : 문장 작
- cols : 가로 크기
- rows : 세로 크기
- placeholder : 힌트값
<textarea cols="20" rows="5" placeholder="하고 싶은 말을 써주세요."></textarea>
<select> : 선택 메뉴
- <select> : select 폼 생성
- Name : select 박스의 이름 지정
- <option> : select 폼의 옵션 값 생성
- Value : 실제로 전달되는 값
- Selected : 최초에 선택된 값 설정
- <optgroup> : option을 그룹화
- Label : optgroup 이름 설정
- Disabled : 옵션은 보이지만 선택하지는 못하도록 설정
<select name="flower">
<optgroup label="redflower">
<option>장미</option>
<option>동백꽃</option>
<option>카네이션</option>
</optgroup>
<optgroup label="whiteflower">
<option>벚꽃</option>
<option>목련</option>
<option>매화</option>
</optgroup>
</select>'[Study] FE > HTML & CSS & JS' 카테고리의 다른 글
| [포스코X코딩온] CSS_04 position & backgound (0) | 2023.03.07 |
|---|---|
| [포스코X코딩온] CSS_03 속성 정리 (0) | 2023.03.06 |
| [포스코X코딩온] CSS_02 선택자 (0) | 2023.03.05 |
| [포스코X코딩온] CSS_01 적용 방식 (0) | 2023.03.03 |
| [포스코X코딩온] HTML_02 <table> 태그 & Semantic (0) | 2023.03.03 |