HTML 구성요소
html은 element라는 요소들로 이루어진 집합체이다. 이외에 CSS와 이벤트로 웹페이지의 컨텐츠를 풍족하게 할수있다.
꺽쇠괄호<> 안의 가장 첫번째로 오는 문자를 tag라고 하며 각 tag로 나누어진 요소들을 element라고 한다.
각각의 element는 <head> 와 </head> 처럼 열고 닫고를 나타낸다.
tag 이외에 꺽쇠괄호에 들어간 요소들은 속성이라고 한다. 각 속성들은 해당 element에 적용되는 고유의
기능들을 변경하는 형태이다. 변경할 기능 = "속성 이름" 과 같은 형태로 이루어져있다.
CSS
CSS는 element들에 공통적으로 적용되는 속성들을 별도로 나누어놓은 것이다.
<head> 에 <style> 엘리먼트 내에 선언도 가능하지만
따로 css 파일을 만들고 <link> 엘리먼트를 생성하여 참조가 가능하다.(모듈처럼)
선택자 선언부
p {}CSS의 형태는 선택자와 선언부로 이루어져있다.
선택자는 전체 선택자 , 태그 선택자 , 클래스 선택자 등이 있으며
전체 선택자는
html 전체에 적용되는 선택자이며 앞에 * 표시를 붙여 사용한다.
*{선언내용;}
태그 선택자는
특정 태그들에 전부 적용되는 선택자로 태그 이름을 붙여 적용시킨다.
p{선언내용;}
h1{선언내용;}
클래스 선택자는
클래스를 만들고 선언하고 싶은 엘리먼트의 속성처럼 추가한다.
.클래스이름{선언내용;}
<p class="클래스이름">
ID 선택자는
유일한 한 element 에만 적용됩니다. 복수의 대상에게 동일한 id를 부여할 수 없습니다.
#아이디이름{선언내용;}
<p id="아이디이름">
하위 선택자는
해당 엘리먼트 아래 있는 명시된 엘리먼트를 찾아가 적용시키는 선택자입니다.
p ui{선언내용};해당 태그를 가진 모든 엘리먼트에 적용시킵니다.
자식 선택자는
해당 엘리먼트 아래에서 경로를 찾아가 적용시키는 선택자입니다.
div>ui{선언내용};만일 적용시키려는 엘리먼트 이외에 동일한 태그를 가진 엘리먼트가 존재한다면 이 선택자를 쓰는게 더 좋습니다.
선택자들은 서로 조합이 가능하기에 클래스 선택자를 사용하면서 그 아래의 항목에 영향을 주고 싶다고 한다면 하위선택자나 자식 선택자를 사용하는 등의 활용이 가능합니다.
이벤트
웹페이지에서 컨텐츠를 클릭하고나 슬라이드바를 내리거나 마우스휠을 통해 아래로 내리는 것들은 이벤트로 구현이되어 있다.
<button type="button" onclick="javascript=alert('click button!!')">Button</button>해당 코드는 버튼을 만드는 코드이다. 자바스크립트의 내용이 포함되어있는데 이 코드는 아래 처럼 경고문을 띄워주는 것과 같은 효과인듯하다.
'새로 시작하는 TIL' 카테고리의 다른 글
| 2025 02 11 TIL (0) | 2025.02.11 |
|---|---|
| 2025 02 09 TIL (0) | 2025.02.09 |
| 2025 02 05 TIL (0) | 2025.02.02 |
| 2025 01 26 TIL (0) | 2025.01.26 |
| 2025 01 23 TIL (0) | 2025.01.23 |