영벨롭 개발 일지

css의 선택자에는 기본 선택자, 복합 선택자, 가상클래스 선택자, 가상요소 선택자, 속성 선택자가 있습니다. 하나씩 살펴봅시다! 1. 기본 선택자 이름 설명 사용법 전체 선택자 Universal Selector 모든 요소를 선택 * { ... } 태그 선택자 Type Selector 태그 이름으로 요소 선택 태그이름 { ... } 클래스 선택자 Class Selector html class 속성의 값으로 요소 선택 .클래스이름 { ... } ID 선택자 ID Selector html id 속성의 값으로 요소 선택 #id이름 { ... } Hello World! 재미있는 html css 공부! 홍길동 * { /*전체 선택자*/ background-color: antiquewhite; } p { /*태그 ..

[ CSS의 기본 문법 ] css의 기본 문법은 다음과 같습니다. 선택자 { 속성: 값; } 선택자(Selector)는 html의 특정 요소를 선택하는 것으로 스타일을 적용할 대상을 의미합니다. 태그이름 { 속성: 값; } .클래스이름 { 속성: 값; } #id이름 { 속성: 값; } 속성(Property)는 스타일의 종류를 의미합니다. [ CSS 선언 방식 ] 1. 내장 방식 내장 방식은 html 문서의 장점 단점 css 파일을 따로 생성하지 않아도 html 내부에서 바로 작성할 수 있음 css 내용이 많아지면 html 내부에서 한번에 처리하기 어렵기 때문에 유지보수 측면에서 안 좋음 2. 링크 방식 태그를 사용하여 외부 css 문서를 가져와서 연결하는 방식입니다. 병렬로 연결하는 방식으로 가장 많이 ..

전역 속성이란 전체 영역에서 모두 사용할 수 있는 속성입니다. title 속성은 요소의 정보나 설명을 지정하는 속성입니다. 웹 페이지에서 해당 요소에 마우스를 갖다대면 지정한 설명을 볼 수 있습니다. Hello! style 속성은 요소에 적용할 스타일을 지정합니다. 이 방식을 인라인 방식의 스타일 선언 방식이라고 합니다. 하지만 이 방식은 지나치게 우선되어 있기 때문에 유지보수에 악영향을 미칠 수 있으므로 권장하진 않습니다. Hello! class 속성은 요소를 지칭하는 중복 가능한 이름을 지정합니다. css나 javascript에서 요소를 정확하게 제어하기 위해 선택자로 사용됩니다. Hello! /* css */ .hello { color: red; } id 속성은 요소를 지칭하는 고유한 이름을 지정합..

요소가 화면에 출력되는 특성에는 글자와 상자, 크게 2가지로 분류할 수 있습니다. 글자는 인라인(inline) 요소, 상자는 블록(block) 요소인데요! 하나씩 살펴봅시다. 먼저 요소(elemnet)란 기본적으로 내용 이 자체를 의미한다고 보시면 됩니다. 1. 인라인 Inline 요소 인라인 요소는 글자를 만들기 위한 요소입니다. 대표적인 인라인 요소로는 태그가 있습니다. Hello World 위와 같이 작성하시면 브라우저에는 다음과 같이 나타납니다. 즉, 요소가 수평으로 쌓이고 코드의 줄바꿈이 내용의 띄어쓰기로 나타납니다. 인라인 요소의 특징을 표로 정리해볼게요. 특징 요소 수평으로 쌓임 가로, 세로 너비 포함한 콘텐츠 크기만큼 자동으로 줄어듬 css의 width, height 속성 지정할 수 없음 ..

1. - 블록 요소, 특별한 의미가 없는 구분을 위한 요소 내용 2. - 블록 요소, 제목을 의미하는 요소 제목 제목을 의미하는 요소로, 일반 텍스트보다 굵고 진하게 표시됩니다. 부터 까지 사용가능하며, 숫자가 작을수록 더 중요한 제목을 정의합니다. 3. - 블록 요소, 문장을 의미하는 요소 텍스트 텍스트 단락을 만다는 태그로 줄바꿈 없이 텍스트를 한 줄로 표시합니다. 이때 텍스트 줄이 브라우저 창의 너비보다 길어질 경우, 줄이 자동으로 바뀝니다. 4. - 인라인 요소, 줄바꿈 요소 Hello World 태그를 태그 내부에 사용하게 되면 줄바꿈을 할 수 있습니다. 5. - 인라인 요소, 특별한 의미가 없는 구분을 위한 요소 Hello New World 태그는 특별한 의미 없이 구분을 위한 요소로 텍스트 ..

오늘은 HTML의 기본 문서 구조에 대해 살펴보겠습니다. VS Code에서 html 파일을 열고 ! + tab 키를 누르면 다음과 같이 자동으로 html 기본 구조가 생성됩니다. 위 코드를 보시면 크게 , ... , , ... 태그를 보실 수 있습니다. 자 이제 각 태그를 자세히 알아보겠습니다. 1. 태그는 문서 유형을 정의하는 태그입니다. 웹 브라우저에게 어떤 문서와 어떤 방식으로 페이지를 이해하면 되는지를 알려주는 용도입니다. 2. ... 문서 유형을 지정한 후, HTML 문서의 시작과 끝을 웹 브라우저에게 알려주는 역할을 합니다. 즉, 문서의 전체 범위를 나타냅니다. 태그에서는 lang이라는 속성을 사용하여 문서에서 사용할 언어를 지정할 수 있습니다. 예를 들어 이면 한국어를 사용하겠다는 뜻입니다...