고정 헤더 영역
상세 컨텐츠
본문
728x90
// 지난 시간까지 구조만들기 끝 :)
- 블록 태그 : 구조 만들기에 사용
- 블록 內 인라인 태그 : 컨텐츠를 마크업하는 태그
developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
Inline elements - HTML: HyperText Markup Language | MDN
HTML (Hypertext Markup Language) elements historically were categorized as either "block-level" elements or "inline-level" elements. Since this is a presentational characteristic it is nowadays specified by CSS in the Flow Layout. Inline elements are those
developer.mozilla.org
- <b> : 볼드체 됨. 굳이 안 쓴다. 미래지향적이지 않다. 태그의 본질은 how(css 영역)가 아니라 what을 보이는 것 (애는 뭐다!)
- cf) <em>, <strong> 애네들도 굵게 해주는.
- <br> : 내려쓰기 (break)
- <button> :
- cf) <input>
- <input type="button" value="click"> : 모양이 정해져있음 (정형화된 모형이면 이거)
<button>Click</button> : 여기 안에는 이미지도 넣을 수 있고 꾸며줄 수 있음. (꾸미려면 이거)
- <del> : 요긴하나 잘 안쓰임.
ㅡㅡㅡㅡㅡ 아래 것들은 태그라기보다는 api 격
- <canvas> : ★ 캔버스를 그린...?
- <audio> : 음악 포함 가능
- <video> : 문서 내 비디오 포함 가능
- <svg> :
- <img> : 이미지 삽입
-img src="logo.png"
src (소스)
자원이 있으면 '경로'를 써줘야 한다. (무조건 상대경로)
../image/logo.png
- 컨텐츠 없애고 예쁘게 보이려고 넣은게 아님.
alt = 뉴렉처 온라인 이라고 원래 있었던 컨텐츠를 꼭! 넣어주어야 한다. (이미지가 로드 되지 않아도 컨텐츠는 보여주도록)
- <input> : 폼태그 넣을 때 사용 (타이븐? - 체크박스, 라디오 등등)
- <label> : 인풋 다룰 때 같이 배울 것
- <script>
- <select> : 홈태그 배울 때 배울 것
- <abbr> : <abbr title="Casacading~">CSS</abbr> 마우스 커서 두면 줄임말 보이도록
- <s> : css로도 하지만 html로도 많이 하는 (이거 더 보기)
- <span> : 인라인 태그에서의 <div> 역할 (주구장창 쓸 태그)
-> 이만큼 css 주겠다~ 하는거 - <sup> : 승수 표현 ex) x의 2승 -> x<sup>2</sup>
<sub> : 이건 아래로 표현하게끔 하는 승수 표현 - <picture> : 반응형 때문에 등장한 거. 화면 사이즈에 따라 사이즈가 조절되는
- 기본 이미지는 뭘 쓰지만, 화면이 작아지면 이 사진으로 바꿔달라~
- <noscript>, <object> : 쓰지 말아야(!) 할 것
- <bdi>, <bdo> : 우리나라에는 없는. (문자를 어느쪽에 정렬할지에 대한?)
- <big>, <small> : 이것도 css로
- <output> : 별로 쓰지 않음
- <template> : 별로 쓰지 않음
- <acronym> : 별로 쓰지 않음
- <var> : 많이 사용될지 모르겠으나... 변수를 변수라고 말해주는 것 (내용 강조)
ex) <var>x</var> - <kbd> : 문자를 키보드 버튼처럼 보여주는 것 (굳이... ㅎㅎㅎ)
파이어폭스에서 열면 정말 키보드처럼 보인다. (크롬에서는 잘 안 보임) - <code> : 이건 코드라고 알려주는
- <pre> : 이거로 감싸주면 visual studio 속 '앞의' 여백도 그대로 유지되어 나옴
- <pre> ~~ </pre>하면 이 앞의 공백이 보일거라 생각했는데 결과로 그러지 않았다.
<pre>는 저렇게 써주는거로~!
- <ruby> : 어떻게 읽을지 표현해주는 (소리글자를 적어주는)
- 한글은 뜻과 소리가 같지만 다른 외국어는 읽는게 다르기에 소리글자를 달아줄 때가 많음
- rp : 어디에서 어디까지가 ruby 텍스트다
- rt :
"이만큼밖에 없다~"는게 요지.
<a> 태그들 달기
CSS 시작!
- 문서의 3요소 : 컨텐츠, 구조 (html), 그리고 스타일(css)
1. 글자체 (폰트)
- 구글 fonts.google.com/
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
- (한국어는 fonts.google.com/?subset=korean)
2. 문서에 스타일 입히기
Q. 무엇을 바꿀 수 있느냐
- ex - 색깔, 폰트사이즈 등
Q. 어떻게 사용하는게 좋으냐
- 위에 화면처럼 html에 직접 스타일 입히는 일은 앞으로 많이 없을거다
- 선택자
1) 특정 태그에 스타일 부여하기
ex) h1 태그에 스타일 부여하고 싶으면, 모든 h1 찾아다니면서 스타일 줄 것
- 나 칼라 레드로 하고 싶어 > h1에 대해서 > stlye로 감싸주기
★ 일괄적용해주는 <style> 태그는 <head> 안에!!!
- 조건은, '예리하게' 타겟팅이 가능해야함
-> 선택자에 대해 더 공부할 필요가 있다.
* 클래스 장점
- 문제 1) 다른 범위 선택됨
문제 2) 태그명 다른데 동일한 스타일 갖게 하고 싶을 때
-> 같은 스타일이라는 그룹으로 뭉쳐줄 수 있다. 이때 사용되는게 <class>
"너하고 나는 같은 스타일이얌"
- 클래스 많이 쓴다.
* ID명
- html에서 쓰이는 녀석인데, html을 식별하는 녀석
- id를 사용해서 스타일을 줄 수도 있다는 것
- 영역이 다 영향 받음
- #id명
- 그냥 h만 쓰면 -> 태그로 인식을 한다. (<>괄호가 없어도!)
막 djahuhsfj 같은 이상한 애를 써도 태그로 인식을 하고 우선 찾음
- 그래서 이게 태그가 아니고, id명 'h'라고 알려주는 표시가 바로 #
- 내가 원한바로는 헤더 내의 <h1>들이 '다' 핑크색으로 바뀌어서 '메인메뉴'도 핑크색으로 바뀌어야 하는데, 빨간색인 이유는! ...... 우선 순위 관련해서는 다음 시간에.
- 링크 때문에 그렇지 <h1>뿐만이 아니라 '다' 분홍색으로 바뀌었는지 <a href> 태그 빼고 확인해보기
-> 확인. 제목, 내용 다 바뀌는게 맞음
태그명. 클래스명. id로도 스타일을 줄 수 있구나~
"이해, 정리는 기본입니다.
숙달이 되어야 오늘 배운걸 공부한겁니다."
728x90
반응형
'수업 일지 > HTML, CSS, Flex, Grid' 카테고리의 다른 글
| 10일. CSS(1) - 방 만들기 (0) | 2021.03.04 |
|---|---|
| 9일. HTML(8) - 셀렉터를 이용한 엘리먼트 선택 (0) | 2021.03.03 |
| 7일. HTML(6) - 테이블 만들어주는법, 1/5, 1-5 페이지 만들어주는법, inline vs block (0) | 2021.02.26 |
| 6일. HTML(5) - section, article, aside, nav (0) | 2021.02.25 |
| 5일. HTML(4) - header, main, footer + aside // 고전적인 방법 (0) | 2021.02.24 |
