forDevLife
html & css 분석 본문
<pre> : preformatted text : 해당 태그 내에서 작성된 텍스트의 모든 띄어쓰기 & 줄나누기는 웹 브라우저에 그대로 표현
<hr> : horizontal rule : 수평 가로 구분선
<!-- --> : html 주석 부분(중첩 불가)
<태그이름 style="속성이름:속성값">을 통해 css 스타일을 HTML 요소에 직접 설정 가능하다. 하지만 이러한 방법은 오직 단 하나의 HTML 요소에만 스타일을 적용할 수 있다.
style 속성 값에 사용되는 CSS 속성과 속성값들은 세미콜론(;)을 이용하여 구분한다.
CSS를 하나만 사용할 때나, 여러 개의 CSS 속성 중 맨 마지막 속성은 세미콜론 생략할 수 있다.
+ CSS를 통해 아래와 같이 <head> 내의 <style>을 통해 일괄 설정도 가능하다.
<body background>
배경을 이미지로 사용 가능하다.
배경을 이미지로 사용하면 웹페이지 로딩 시간이 증가하게 되므로, 보통은 작은 사이즈의 이미지를 패턴으로 만들어 배경으로 반복 설정!
<a href> : 하이퍼 링크, target을 통해 링크로 연결된 문서를 어디에 열지 명시한다.
1. _blank : 새 창, 새 탭에서 오픈
2. _self : 현재 프레임에서 오픈
3. _parent : 부모 프레임에서 오픈
4. _top : 현재 창의 가장 상위 프레임에서 오픈
5. 프레임 이름 : 지정된 custom frame(iframe)에서 오픈
<img> : html에 이미지를 삽입할 때 사용. 종료 태그가 없다. alt를 통해 이미지 로딩 못할 때 대신 나타날 문자열 설정 가능하다.
첫번째 이미지는 width, height 속성을 직접 설정한 것이다.
-> <style>로 된 전역의 영향을 받아 width는 90%로 설정된다. height는 214로 설정된다.
두번째 이민지는 style 속성을 사용하여 설정한 것이다.
-> img 태그 내의 style을 통해 width, height를 직접 설정하므로, 이 값으로 지정된다.
<ul> : 순서 없는 리스트. 여기에 포함되는 각각의 요소는 <li>태그로 시작
css의 list-style-type : circle / disc(검정 작은 원 = 기본) / square로 변경 가능
<ol> : 순서 있는 리스트. 여기에 포함되는 각각의 요소는 <li>태그로 시작
유사하게 list-style-type을 이용해서 요소 앞의 마커를 다른 모양으로 변경 가능하다.
<dl> : 정의 리스트는 용어와 그에 대한 정의를 모아놓은 리스트이다.
<dt> 태그에는 용어의 이름이 들어가고, <dd>에는 해당 용어에 대한 정의가 들어간다.
<table> : data를 보기 좋기 정리하여 보여주는 표를 의미
<tr> : 테이블에서 열을 구분
<th> : 각 열의 제목을 나타냄. 모든 내용은 자동으로 굵은 글씨 & 가운데 정렬
<td> : 테이블의 열을 각각의 셀로 나누어 줌
table style로 ';' 구분을 통해 위의 style에서 지정하는 방법인 css 형식으로 지정할 수 있다. (마지막 세미콜론 생략 가능)
css 방식으로는 선너비, 선모양, 선색을 한꺼번에 지정하며, 특히 '선모양'은 필수로 지정해줘야 한다.
아래처럼 table border를 이용해서 주는 것도 가능하다.
<nav> : 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합을 정의할 때 사용.
예시로 메뉴, 목차, 인덱스 등이 있다. -> 뒤에서 추가로 다루자.
'Web Front' 카테고리의 다른 글
| 2. CSS Layout (0) | 2021.08.04 |
|---|---|
| 1. html & CSS 기초 (0) | 2021.08.04 |
| 1. Google clone coding (0) | 2021.08.04 |
| [Javascript] 쌩 기초 & 웹 프로그래밍 jsp 뜯어보기 (0) | 2021.07.22 |
| html & css 분석 <2> (0) | 2021.07.07 |
