forDevLife
html & css 분석 <2> 본문
1. 블록과 인라인
HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가진다.
대부분 HTML요소는 이러한 display 속성값으로 다음 두 가지 중 하나를 가지게 된다 -> 블록, 인라인
1) 블록 : 언제나 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지한다.
* <p>, <div>, <h>, <ul>, <ol>, <form>요소는 모두 속성이 블록이다.
<div> 요소
다른 HTML 요소를 하나로 묶는 데 자주 사용되는 대표적인 블록 요소이다. 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용된다.
2) 인라인 : 새로운 라인에서 시작하지 않는다. 또한 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(Content) 만큼만 차지
* <span>, <a>, <img> 요소 등이 있다.
<span> : 텍스트의 특정 부분을 묶는 데 자주 사용되는 요소이다. 주로 텍스트의 특정부분에 따로 스타일을 적용하기 위해 사용된다.
2. iframe 요소
iframe이란 inline frame의 약자이다. 이 요소를 통해 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 웹 페이지를 삽입할 수 있다.
- style 속성의 border를 통해 테두리 스타일을 변경할 수 있다.(표현하고싶지 않으면 border:none)
* 프레임셋(frameset) -> HTML5 표준 권고안에서 지원 x, 여러 개 표현하고 싶을 때 iframe or CSS 사용한다.
이를 이용하여 하나의 브라우저 창에 둘 이상의 페이지를 표시할 수 있다. iframe과는 달리 하나 이상의 페이지를 동시에 가진다.
또한, noresize 속성 명시하지 않으면, 사용자 마음대로 페이지 크기 조절 가능하다.
프레임셋에서 각각 페이지는 frame 요소로 표현된다. 종료태그를 가지지 않는다.
이런 식으로 column / row 방향으로 페이지를 생성할 수 있으며, noresize를 통해 사이즈 고정이 가능하다. 하지만 안 쓰므로 알아두기만!
3. 레이아웃
HTML 레이아웃이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미한다. 웹 사이트의 외관을 결정짓는 매우 중요한 요소이다. 다음 방법으로 레이아웃을 작성할 수 있다.
1. div 요소를 이용한 레이아웃
-> css 스타일을 손쉽게 적용할 수 있으므로, 레이아웃 작성 시 자주 사용된다.
- head의 style tag 내에서 #을 통해 요소들마다의 특성을 꾸며준 후, 아래 body에서 <div id = ?>를 통해 지정해준다.
float : 말 그대로 왼쪽에 띄워져 있다는 의미이다. nav는 floating 되어 있으며, 그 다음 오는 section도 float 되어있다.
이렇게 되면 nav가 만들어놓은 float 공간 뒤에 section이 float 해서 붙게 된다.
만약 section이 float 되어있지 않다면, nav 아래로 (3차원으로 생각했을 때 안보이도록 아래로) 들어가서 가려지게 될 것이다.
footer에는 clear:both로 되어 있는데, 양쪽의 float들을 제거하고, 아래 영역을 이용한다는 의미이다.
마찬가지로 clear 하지 않다면, nav + section 아래로 들어가서 겹쳐져 보일 것이다.
clear: both 방법도 있지만, 부모 div를 after & both & clear로 감싸고, 그 안에서 float을 하는 div를 만드는 방식을 많이 쓴다고 한다. 아래 4번 참고.
2. HTML5 레이아웃
-> div와 거의 동일하다. 다만 HTML5용 별도의 새로운 요소(tag)를 지원하여 그걸 사용하면 된다.
이 요소를 의미(semantic) 요소라고 한다.
3. table 요소를 이용한 레이아웃 -> 수정이 매우 힘들고 복잡하므로 안쓴다!
4. Form 요소
form 요소를 통해 사용자로부터 입력을 받을 수 있다. 또한 사용자가 입력한 데이터를 서버로 보낼 때도 form 요소를 사용한다.
이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다.
사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달된다.
5. CSS란?
CSS : Cascading Style Sheet의 약자. HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어.
적용 방법은 다음과 같다.
1. 인라인 스타일 : HTML 내부 요소에 style 속성을 사용하여 적용. 해당 요소에만 적용 가능
2. 내부 스타일 시트 : HTML 문서의 <head> 태그 내에 <style> 태그를 이용하여 스타일을 지정. 해당 HTML 문서에만 적용 가능
3. 외부 스타일 시트 : 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해준다.
스타일을 적용할 모든 웹 페이지의 <head> 태그 내에 <link>를 사용하여 외부 스타일 시트를 포함하면 된다.
* 적용의 우선순위
1. 인라인
2. 내부 / 외부 스타일 시트 -> 가장 마지막에 적용된 스타일 시트가 적용된다.
3. 웹 브라우저 기본 스타일
* CSS 선택자
스타일을 적용할 HTML을 선택하는데 사용하는 대표적인 선택자는 다음과 같다.
1. html 요소 선택자
2. id 선택자 -> #으로 지정된 특정 아이디 이름을 가지는 요소를 선택해서 p에 적용할 수 있다.
html, css에서는 하나의 웹 페이지에 속하는 여러 요소에 같은 아이디 이름을 사용해도 문제없이 동작, 하지만 중복된 아이디를 가지고 자바스크립트 작업 하면 오류 발생. 따라서 하나의 웹 페이지에 속하는 요소에는 다른 아이디 사용 or 클래스 사용 -> 즉 걍 클래스 사용.
3. class 선택자 -> id랑 거의 비슷해 보인다. 차이에 대해서 알아보면,
id는 스타일을 지정할 때 한 가지만 지정해서 쓰는 이름이고(#이름), 하나의 문서에 고유한 id 하나만 쓸 수 있다.
class는 그룹으로 묶어서 스타일을 지정할 대 쓰는 이름이다.(.이름)
둘 다 숫자로 시작하면 안된다.
위의 내용에서 볼 수 있듯이 css 내에 p.start로 스타일을 저장하면, 아래 <p> tag에서만 스타일이 적용이 된다.
6. Javascript
html로 웹의 내용 작성, css로 웹을 디자인, 자바스크립트로 웹의 동작을 구현할 수 있다.
주로 웹 브라우저에서 사용되나, Node.js 같은 프레임워크를 사용하면 서버 측 프로그래밍에도 사용할 수 있다.
대부분 웹 브라우저에 자바스크립트 인터프리터가 내장되어 있다.
- Script 요소 : 해당 웹 페이지에 사용할 스크립트 정의하기 위해 사용. 요소 내부에 직접 스크립트 작성하거나, 외부 스크립트 파일 주소를 src 속성값으로 명시
- noscript 요소 : 스크립트를 지원하지 않는 웹 브라우저를 사용하는 사용자에게 보여줄 문자열을 설정할 때 사용.
일반적인 html 문서의 body 요소 내부에 나올 수 있는 모든 요소를 포함할 수 있다.
7. HTML5 개요
8. 의미 요소(semantic element)
말 그대로 그 자체로 의미를 가지는 요소를 가리킨다. 즉 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해주는 요소를 의미한다.
예를 들어 의미요소가 아닌 'div', 'span' 등은 그 자체로 의미가 없으므로 직접 코드를 봐야 알 수 있다.
반면에 table은 표를 만드는 데 사용되었다는 것을 이름으로부터 알 수 있다.
즉 이 요소들은 지워도 뭐 페이지 보이는 것에 영향은 없지만 개발자가 의미를 쉽게 파악할 수 있게 된다.
1. header : html 문서나 섹션(section)에 대한 헤더를 정의한다.
헤더란 도입부에 해당하는 컨텐츠를 가지고 있는 부분을 의미한다. 한 문서 내에 여러 개의 header 요소가 존재할 수 있다.
2. nav : html 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의한다.
링크의 커다란 집함을 의미하지만, 문서 내의 모든 링크가 nav에 포함되는 것은 아니다. 그냥 이 부분에 링크의 집합이 있다는 의미를 전달.
3. section
섹션이란 제목을 가지고 있으며, html 문서의 전체적인 내용과 관련이 잇는 콘텐츠들의 집합을 의미한다.
4. article
html 문서에서 독립적인 하나의 기사(article) 부분을 정의한다. 웹 사이트의 나머지 부분과는 별도로 읽을 수 있어야 한다.
-> section과 예제가 별 다를 것 없어 보인다. 대체로 section은 html 문서의 전체적인 내용에 포함됨. article은 별도 독립 영역
5. figure 요소 & figcaption 요소
figure는 html 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠 정의할 때 사용한다.
figcaption 요소는 figure 요소를 위한 캡션(아래 이름)을 정의할 때 사용된다.
6. footer : html 문서, section 부분에 대한 푸터(footer)를 정의한다.
일반적으로 사이트의 작성자, 그에 따른 저작권 정보, 연락처를 명시하며, 한 문서 내에 여러 개의 footer 요소가 존재할 수 있다.
'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 분석 (0) | 2021.07.05 |
