8/14 HTML
Element = 태그 이름, 요소
위아래에 <html></html> 태그가 없으면, 인식을 못하기에 이렇게 해줘야함
Html 기본적 문법
HTML파일에 필요한 최소한의 태그는 아래와 같습니다.
- <html>
- <head>
- <body>
- 앞뒤로 시작하고 끝나는 태그로 이루어짐 (그러지 않은 것도 있음; 시작과 동시에 끝나는 <img> <br> 끝낼 게 없으니)
- 태그 안에 내가 쓰고 싶은 거 다 씀
- 이미지 텍스트 다 넣을 수 있는데 그에 맞는 태그로 알려줘야
- 총 150개 태그이지만, 다 암기 안 해도 됨, 적절하게 검색하면 됨
- 웹페이지는 평균적으로 32개 태그 사용됨 (가장 빈번하게 사용)
<html> <head> <body> <title> <meta> <div> <a> <script> <link> <img> <span> <p> <li> <ul> <style> <br> <h2> <input> <h1> <form> <h3> <nav> <footer> <header> <iframe> <button> <strong> <i> (빈도율로 나열)
8/14는
32개 태그 중에 10개 배우고 CSS로 넘어갈 것
- <header></header>
- <h1></h1>
- <h2></h2>
- <section></section>
- <p></p>
- <li></li>
- <a hef=””></a>
- <br>
- <hr>
1. 웹사이트 만들기
<head>
<title>Document</title>
<meta charset="UTF-8" />
</head>
- 이게 한 세트, 단락, 화면을 쪼개서 생각!
- <head>태그는 웹사이트 화면에는 안 나옴, <title> 내용만 탭 이름으로 나옴
웹사이트 화면에 보이는 파트는 <body>부터만!
- 웹사이트 만들기 전, 쪼개서 생각/
단락, 화면을 쪼개서 생각!
헤드/ 메뉴/ 전체 파트 (전체파트 내용에서도 설명, 이미지, 나의 개인정보)
아이콘과 텍스트도 모두 태그로 쪼개져 있다!
왼쪽 side-bar 위 header, 가운데 main contents( body)
- 물건을 하나하나 박스에 넣으면 박스가 낭비 됨 → 태그 하나하나를 박스에 담으면 성능이 나빠짐, 세세하게 나눌 필요 없다
- Body 안에도 header,설명, 오른쪽 사이드바, 이미지, 타이틀,
먼저
바디
- Developer Code Kim 작성
- Let’s start with wecode 작성
- 소개글
- 이미지
- Email, Instagram
메뉴
- Home
- About me
- Career
- Projects
이런식으로 하고 나서,태그 넣기
- 같은 태그에 있으면 줄 띄어도 한 줄에 나옴!
- 태그로 분리를 해 놓아야 함
<header></header> : 제목, 주제 (사용하기 나름)
- 다른 개발자와 웹브라우저에게 이거 중요하다고 알려주는 역할
- 직접 이 안에 텍스트 넣기도 하고, 다른 태그를 넣어서 감싸는 역할 하기도
<section></section>
- 나눠 주는 역할
태그끼리 들여쓰기를 indent 들여쓰기 보고 어디부터 어디까지인지 한세트인지 알 수
<img src= “링크 주소" alt=”이미지제대로 작동하지 않을때 뭐라고 적어줄래?">
<a> 태그
- a는 tag 이름이고
- href는 <a> 태그의 attribute(속성) 이름이며
- https://wecode.com 는 href 속성에 대한 attribute 값이고
- "위코드로 이동"은 content(내용)입니다.
Target : 어디에서 열지 설정
- “_self”: 이전창
<a href="https://wecode.com" target=”_self”>Click</a>
- “_blank”: 새로운 창
<a href="https://wecode.com" target=”_blank”>Click</a>
2. Ol, Ul, li
ol>li*3 + tab 키 누르면 자동으로
<ol>
<li></li>
<li></li>
<li></li>
→
1.
2.
3.
<ol type =”i”>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
→
i. 1
ii. 2
iii. 3
<ol type =”i” reversed>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
→
iii. 3
ii. 2
i. 1
ul>li*3 + tab 키 누르면 자동으로
→
<ul>
<li></li>
<li></li>
<li></li>
→
<ul> 만 있다고 해서 목차 나오지 않음
<ul> + <li>
- ₩
- ㅇ
- ㅇ
<ol>+<li> 있어야
- ㅇ.
- ㅇ
- ㅇ
<li> list tag만 있는 게 아니라, <ul> <ol>로 감싸는 이유는 목차 구분해주기 위해서
<hr> 태그는: 구분선! 단순히 분리하기 위해서
<a> 태그는 링크 걸 때 → Instagram
Semantic Tags
- 그냥 띄어쓰기 해도 되는데, 굳이 <h1> 태그 쓰는 이유 → 검색 잘 되라고 넣어 주는 것
- 이거 중요한 거야 그니까 이거 위에 띄어줘 (h1에 쓴 텍스트)
2-1. HTML Attributes
2-1-1. id
id는 각 태그에 이름을 주는 속성입니다.
이름은 이름인데, 주민등록 번호와 같이 한국에 단 하나밖에 없어 대상을 식별할 수 있는 고유한 값이어야 합니다.
따라서 웹 페이지에 해당 id 이름은 오직 하나만 가질 수 있습니다.
즉, 중복된 id 이름이 있으면 안된다는 말입니다.
아래와 같이 profile이라는 id를 가진 태그는 단 하나만 있을 수 있습니다.
다른 태그에 profile이라는 id는 더이상 사용할 수 없습니다.
<div id="profile">
id는 해당 요소에만 넣고 싶은 디자인을 적용할 때 사용합니다.
예를 들면 <p> 태그에 글씨 크기를 20px로 적용하면, index.html에 있는 모든 <p> 태그의 글씨가 커집니다. 이런 것을 원한것이 아니라면 id가 profile인 요소에만 글씨 크기를 20px로 적용할 수 있습니다. JavaScript 코드에서도 유용하게 사용합니다. id 이름으로 요소를 찾아서 제목을 유동적으로 바꿀 수도 있고, 새로운 데이터로 내용을 변경할 수도 있습니다.
- id 이름을 준다고 딱히 변하는 것은 없습니다. 단지 tag가 이름을 얻은 것 뿐입니다.
2-1-2. class
class도 태그에 이름을 주는 속성입니다. id와 비슷한 역할이지만,
class는 여러 태그에 중복된 이름을 부여할 수 있습니다.
예를 들어 '이철수'라는 이름을 가진 사람이 여러 명 이듯이
여러 tag에 중복된 class 이름을 줄 수 있습니다.
<div class="content-wrap"></div>
<p class="content-wrap"></p>
2-2. 여러 속성 추가하기
하나의 태그에 2개 이상의 속성을 부여할 수 있습니다.
여러 속성을 주고 싶으면
한 칸 띄어쓰기 후 추가하면 됩니다.
속성의 순서는 상관없이 쓰고 싶은대로 쓰시면 됩니다.
<div id="profile" class="content-wrap"></div>
- 이와 같이 하나의 태그에 id와 class 모두 가질 수 있습니다.
<img src="./hi.png" alt="내사진" >
<p></p> 문단
<b></b> bold
<div> </div> 줄바꿈
<span> </span> 줄바꿈 없음
2-2-1. Input tag
한 페이지 안에 굉장히 많은 input 있을 수 있기에 id 를 통해 고유한 식별자를 줌
Input types 검색 시 기능 나옴
<input id=”input_name type=”text”> 입력창 나오고
<input id=”input_name type=”button”>
<input id=”input_name type=”checkbox”>
<input id=”input_name type=”color”> 사용자에게 color 입력 받을 수 있도록 color picker 나오고
<input id=”input_name type=”file”> file picker 나오고
<input id=”input_name type=”password”> 패스워드 치면 안 보이는 칸 나오고
- 개발자가 화면에 쓴 순서대로 보임,
<h3>
<h2>
<h1> 순으로 써도,
중요하다고 해서 h1이 먼저 나오지 않음
- h3, h2, h1 거꾸로 쓰지 않는다. (에러는 나지 않지만)
- 그리고 h1 다음에는 h2를 쓴다. (순서대로)
글씨 크기 더 작게 쓰고 싶다고 해서 갑자기 h4를 쓰지 않는다.
에러는 나지 않지만.
Div = division
Block vs inline
- 한 칸 다 차지 하는 건 block element : <header>, <footer>, <p>, <li>, <table>, <div>, <h1>
- 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻
- 내가 차지하는 만큼만 Inline level element : <span>, <a>, <img>, button
이렇게 inline, block 성질을 생각하면서 HTML 태그를 선택해야할까요?
물론 대부분 inline, block 성질에 의해 태그가 결정되지만,
아무 태그나 사용해도 결국은 CSS를 통해 얼마든지 성질을 바꿀 수 있습니다.
block <p> 태그를 inline으로
inline 성질을 갖도록 하는 CSS property는 display 와 float 이 있습니다.
.inlineP { display: inline-block;}
.floatLeft { float: left;}
.floatRight { float: right;}
해당 property에 위와 같은 값을 부여하면,요소 옆에 요소가 위치하는 inline 성질로 변하게 됩니다.
Inline 태그 <span> 를 block 으로
.blockSpan { display: block;}
None
HTML은 존재하는데 화면에 보이지 않습니다.
hide 클래스에 부여한 스타일 때문에,
hide 라는 클래스를 제거하면 요소가 다시 보일 것
.hide {display: none;}
display: none; 이라는 값을 주면, 해당 요소는 화면에서 보이지 않습니다.
어차피 안 보일 요소는 왜 작성하는 것 일까요?
여러 이유중 하나는 interactive한 웹을 구현할 수 있기 때문입니다.
display: none; 이라는 값을 주면, 해당 요소는 화면에서 보이지 않습니다.
어차피 안 보일 요소는 왜 작성하는 것 일까요?
여러 이유중 하나는 interactive한 웹을 구현할 수 있기 때문입니다.
원래는 해당 영역이 display: none; 으로 보이지 않다가, 텍스트를 입력하는 순간,
JavaScript가 검색 목록 요소에 다른 클래스로 교체할 것입니다.
아마 그 새로운 클래스에는 display: block; 이라는 값이 있었을 것입니다.
이렇게 클래스 이름에 따라 요소에 display: none display: block 이 있었다가 없었다가 하면서
요소를 보이게 / 안 보이게 할 수 있는 것입니다.
정말 많이 쓰이는 기법
아무 의미 없는 태그를 넣진 않는다
<span> <div> <span>
div는 최하위 < span < p (문장형)
이 셋 사이에서는 의미 나뉘진 않고
Main / section / article / content —> 글에서
제목이 .html로 끝나야 함. —>
이미지 주소는 웹사이트에 올려져야 생기는데, 일반 이미지 파일은
주소가 없음.
1. ./image(1).png 로
2. 야매 (notion이 돈주고 aws를 이용하고 있기에)
notion에 이미지 올리면 주소가 생김, 그걸 코딩에 넣으면 됨
Img 에 이미지 안 나올 때 뜨는 문구 —> alt (너무 중요해서 꼭 써주기)
이미지 텍스트도 읽어져서, Seo 최적화 관점에서 꼭! /
시각장애인들 사용하는 화면 음성으로 읽어주는 도구가 읽어주지 못함.
개발자는 어려움 있는 사람들도 잘 사용하도록 배려할 의무 있기에.
—> 잘 돼 있는게 아마존 쇼핑몰. alt가 더거의 다 있어서, 시각 장애인들 아마존 쇼핑 이용 불편 없다고.
프론트엔드는 CSS 잘하면 좋음, 경쟁력 있기에. CSS 잘하는 프론트 적기에.
CSS 하면서 덜 고통스럽다면 프론트.
'Wecode- 프리코스 (부트캠프)' 카테고리의 다른 글
| 프리코스 (6) - Javascript : 2.데이터 타입, 3.String 문자열 (0) | 2023.09.26 |
|---|---|
| 프리코스 (5) 8/18 - JS pre 강의 : 1. Console (0) | 2023.09.26 |
| 프리코스(4) - 8/17 CSS Position,컴퓨팅사고, JS (0) | 2023.09.26 |
| 프리코스(3) - 8/16 CSS (0) | 2023.09.26 |
| 프리코스 (0)- OT (0) | 2023.09.26 |