본문 바로가기
반응형

Web/html & CSS4

CSS의 기본 개념 - 정리 3 CSS 선택자 스타일을 적용할 HTML 요소를 가리키는데 사용 우선 순위는 HTML 요소 선택자 > 인라인 스타일 > ID 선택자 > 클래스 선택자 > 태그 선택자 순으로 높음 사용 예시 안녕하세요 My text 1 My text 2 My text 3 HTML 요소 선택자 CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있음 스타일 적용 아이디(id) 선택자 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용 스타일 적용 클래스 선택자 특정 집단의 여러 요소를 한번에 선택 할 때 사용 스타일 적용 여기에도 적용 그룹 선택자 위에 언급된 선택자들을 같이 사용하고자 할때 사용 2023. 3. 19.
HTML의 기본 개념 - 정리 HTML Hyper Text Markup Language의 약자로 하이퍼링크를 통해 사용자가 한 문서에서 다른 문서로 접근할 수 있는 텍스트를 사용한 마크업 언어, 웹사이트의 모습을 기술하기 위함 HTML의 요소 구조 HTML 요소는 여러 속성을 가질 수 있으며, 속성은 해당 요소에 대한 추가적인 정보를 제공하는 형태, HTML 요소는 시작 태그로 시작하여 종료 태그로 끝나는 형태 요소 ⊃ 속성(태그와 내용을 포함한 전체) ⊃ 태그 (열기와 닫기 태그 그자체) HTML 태그(tag) 시작 태그 종료 태그 제목 1 제목 2 제목 3 단락 HTML의 기본 구조 html 문서의 최상위 요소 태그 (상단 타이틀) 태그 (외부 리소스 연결) 태그 (CSS 작성) head 문서의 메타 데이터 요소 문서 제목, 외부.. 2023. 3. 19.
CSS의 기본 개념 - 정리 2 CSS의 원칙 css는 모든게 box형태 위에서부터 아래로, 왼쪽에서 오른쪽으로 쌓임 Box model 모든 HTML 요소는 box 형태 하나의 박스는 네 부분으로 이루어짐 (content, padding, border, margin) Margin : 테두리 바깥의 외부 여백 배경색을 지정할 수 없음 .margin{ margin-top : 20px; margin-right : 20px; margin-bottom : 30px; margin-left : 30px; } # shorthand로 구성시 .margin{ margin : 20px 20px 30px 30px; } border : 테두리 영역 .border{ border-width : 7px; border-style : dashed; border-col.. 2023. 3. 10.
CSS의 기본 개념 - 정리 1 CSS *AI의 설명 (Notion AI를 활용해봤습니다.) CSS란 Cascading Style Sheets의 약자로, 웹 페이지의 디자인과 레이아웃을 지정하기 위해 사용되는 스타일 시트 언어입니다. CSS는 HTML과 함께 웹 페이지의 미적인 요소를 꾸며주는 역할을 하며, 선택자와 속성, 값으로 이루어진 규칙들을 사용하여 웹 페이지의 폰트, 색상, 배경, 간격 등의 스타일을 정의할 수 있습니다. 또한, CSS는 웹 페이지의 반응형 디자인을 구현하는 데에도 중요한 역할을 합니다. 미디어쿼리를 사용하여 뷰포트의 크기에 따라 스타일을 다르게 적용할 수 있으며, 이를 통해 PC, 스마트폰, 태블릿 등 다양한 기기에서 최적화된 레이아웃을 제공할 수 있습니다. CSS는 웹 개발에서 필수적인 기술 중 하나이며, .. 2023. 3. 9.
반응형

티스토리툴바