React 개발을 찍어먹어봤는데 간단한 버튼 모양을 만드는데도 너무 헤매서 이참에 html, css를 공부해야겠다는 생각이 들었다.
해외에서 프론트엔드 개발자로 일하시는 분도 html, css 지식의 중요성을 강조하시기도 했고...
퍼블리셔라는 직업이 없어서 html, css 틀을 만들줄 알아야한다고하심 😭
중요성을 이제라도 깨달아서 공부를 시작한다! 이 강의 끝날 때 쯤엔 내가 혼자 html css다 짜서 클론하나 해봐야지 이 블로그 게시물도 html 태그로 작성되기 때문에 html공부를 심도있게 하면 게시물도 좀 더 깔끔하게 보일것같다.
기본 ! : mdn html elements 공식 문서 참고할것
- 개발자 도구 > network > JS, CSS, IMG, MEDIA, FONT, DOC 파일 확인가능. html파일은 DOC로 분류된다.
- 문서 구조와 정보 위계가 명확하게 보이는 HTML코드를 작성하는게 중요하다.( Semantic Markup : 의미 구조에 맞는 html 작성법 )
- 다양한 HTML 태그를 사용해서 SEO 검색엔진 최적화에 도움을 주는 것이 중요하다. div만으로 작성하지 말것
- tag attribute는 기본 tag가 갖지 못하는 추가적인 속성을 설명해준다.
- 강조 태그 em, strong
- a 태그 href 속성 필수
- 페이지 내 이동 : 이동하길 원하는 id, class 등 선택자와 값을 href 속성값에 작성하면 그 위치로 이동한다.
1 2 3 4 5 6 7 8
<a href="#hello"></a> <section id="hello"> blablabla </section
- 메일쓰기 : mailto:메일주소 를 href 속성값에 작성하면 메일 입력창으로 이동한다.
1 2 3 4
<a href="mailto:helloworld@gmail.com"> helloworld에게 메일 쓰기 </a>
- 전화걸기 : tel:전화번호 를 href 속성값에 작성하면 그 번호 대로 전화화면으로 이동한다.
1 2 3 4
<a href="tel:0100000000"> helloworld에게 전화걸기 </a>
- target=”_blank” : 새로운 탭으로 이동
- list
- ol: ordered list
- ul : unordered list. style 속성으로 li 의 bullet 을 없애거나 (style=”list-style-type: none) type 속성을 추가해 bullet type을 변경할 수 있으나… deprecated! ul 속성 관련 mdn문서
- li : list item 목록의 요소로 ol과 ul 내부에는 li 태그로만 목록을 작성할 수 있다. li 외의 태그(a)를 삽입하고 싶다면 li 태그 내부에 태그(a)를 넣어야한다.
- 정의 리스트
- dl : description list
- dt : description term 용어, 키 값
- dd : description data 용어에 대한 설명
- dfn : definition 정의하는 문장내에서 정의하는 용어를 나타낼때 사용한다. dfn mdn 공식문서
1 2
<p>A <dfn id="def-validator">validator</dfn>is a program that checks for syntax errors in code or documents.</p>
이런식으로 쓰인다. dl 내부에만 사용되는건 아닌 모양
- dl 의 자식요소는 오직 div, dt, dd만 가능함
- dt와 dd는 반드시 dl의 자식 요소로 존재해야한다.
- 인용
- blockquote : 내부에 cite 태그로 인용문의 출처를 적어줌, cite 속성을 추가해서 인용 출처가 어디인지 명시할 수 있다.
- q : 문장 내부에 인용할 때 사용한다. 쌍따옴표가 생긴다.
1 2 3 4 5
<p><p/> <p><p/> <p> <q>lalalalalal</q> said song <p/>
- form : 사용자로부터 정보를 입력받을 때 사용 method, action 속성값 필수
- input : type 속성에 따라 입력받을 수 있는 정보가 달라진다. 매우 다양한 type이 존재함 input type mdn 공식 문서
- placeholder, minlength, maxlength, required, disabled, value, min, max, pattern
- type : radio일때 동일한 name 값을 넣어야 한 그룹으로 취급되어 둘중 하나를 선택할 수 있게 된다. value 값을 다르게 넣어야 form submit 할때 값이 보내진다.
1 2 3 4 5 6
<input type="radio" name="subscription" value="subscribed" id ="subscribed"/> <label for="subscribed"/> <input type="radio" name="subscription" value="unsubscribed" id ="unsubscribed"/> <label for="unsubscribed"/>
- type : checkbox 일때 역시 동일한 name값을 넣어서 한 그룹으로 묶는다. 역시 submit시 value값이 보내짐
1 2 3 4 5 6
<input type="checkbox" name="skills" value="html" id ="html"/> <label for="html"/> <input type="checkbox" name="skills" value="css" id ="css"/> <label for="css"/>
- select name, value 필수 multiple 속성을 select에 추가해 여러 option을 선택할 수 있음
1 2 3 4 5 6 7
<label for="skill">스킬</label> <select multiple name ="skill"> <option value="html">HTML</option> <option value="css">CSS</option> <option value="js">JS</option> </select>
- textarea : rows, cols 속성으로 가로 세로 길이 지정할 수 있음
- button : type button, submit(form 제출용), reset(input value reset)이 있다.
- label : for 속성 값에 input id값을 넣어줘야함
- input : type 속성에 따라 입력받을 수 있는 정보가 달라진다. 매우 다양한 type이 존재함 input type mdn 공식 문서
Comments powered by Disqus.