HTML 기초
·
HTML, CSS
1. HTML(HyperText Markup Language)HTML은 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어이다. 웹 브라우저의 여러 내용 중에서 제목과 본문, 이미지, 표 등 웹 요소를 알려주는 역할을 한다. 2. 기본 문법태그태그는 웹 브라우저가 어느 부분이 제목, 텍스트 또는 표인지 구별할 수 있도록 하는 역할을 한다.여는 태그와 닫는 태그 사이에 콘텐츠 내용을 작성하며 태그의 콘텐츠로 또 다른 태그가 포함될 수 있다.콘텐츠올바른 태그 작성 규칙태그 이름은 소문자로 쓴다.여는 태그와 닫는 태그를 정확히 입력한다.들여쓰기를 적절히 사용하는 것이 좋다.속성속성은 태그의 부가적인 기능을 정의하는 것으로 선택사항이다. 시작 태그 내부에 정의하며 여러 속성을 작성할 때는..
CSS 이론 (2) - 박스 모델 / 우선순위 / 단위
·
HTML, CSS
1. CSS 박스 모델웹 페이지에서 모든 요소는 하나의 박스로 표현된다. 이 박스는 내용, 패딩, 테두리, 마진으로 구성된다.Content (내용): 요소의 실제 내용이 들어가는 영역Padding (패딩): 내용과 테두리 사이의 여백Border (테두리): 요소를 감싸는 경계선Margin (마진): 요소 바깥쪽의 여백. 다른 요소와의 간격을 조정하는 데 사용됨이것은 박스 모델입니다!body { background-color: antiquewhite;}.box { width: 200px; padding: 20px 40px; border: 10px solid gray; margin: 15px; background-color: lightblue;} 요소의 전체 크기는 width + padding +..
CSS 이론 (1) - 적용 방법 / 선택자 / 주요 속성
·
HTML, CSS
CSS(Cascading Style Sheets)는 HTML이나 XML 같은 마크업 언어 요소의 스타일을 지정하는 스타일 시트 언어이다. 웹 페이지의 디자인과 레이아웃을 담당하여 HTML과 함께 웹 개발의 필수 요소로 사용된다.1. 적용 방법(1) 인라인 스타일HTML 요소의 style 속성을 이용하는 방법이다.인라인 스타일(2) 내부 스타일 시트(3) 외부 스타일 시트별도의 CSS 파일을 만들어 HTML 파일에서 연결한다. 요소에 href 속성으로 CSS 파일을 입력한다. 여러 페이지에서 동일한 스타일을 쉽게 관리할 수 있다.2. 선택자(Selectors)CSS에서 특정 요소를 선택할 때 사용된다.(1) class 선택자사용법: .className클래스 선택자는 여러 요소를 그룹화하고 해당 그룹에 스..
HTML 구조 및 요소(태그)
·
HTML, CSS
1. HTML이란?HTML은 웹 문서를 만들기 위한 표준 마크업 언어이다. 태그로 요소를 감싸서 의미를 부여하며 모든 브라우저에서 동작한다.문서의 특정 영역에 의미를 부여하고, 논리적인 영역으로 구조화 하고, 이미지와 비디오 같은 콘텐츠를 삽입할 수 있게 해주는 요소들로 구성되어 있다.HTML 문서는 아래와 같은 기본 구조를 가진다. Hello World! 이것은 HTML 기본 구조입니다.  : HTML5 문서임을 선언 : HTML 문서의 루트(root) 요소 👀👀👀 오늘의 할 일 HTML을 배우면서 해야 할 일들을 정리한 목록입니다. HTML 예습하기 MDN 사이트 접속하기 w3school 사이트 접속하기 실습 도전하기 + 목록을 ..