밴의 데이터 과학

박스 모델 Box model CSS에는 모든 요소가 박스 모양으로 구성되어 있습니다. 제 블로그 메인화면에서 크롬의 Develop Tools (shortcut: F12키)를 사용하여 웹페이지 구성을 살펴보겠습니다. 블로그 카테고리가 박스로 표현되고, 각 카테고리 내에는 소카테고리도 박스로 구성되어 있습니다. 또한 가장 아래에는 귀여운 인스타그램 아이콘도 박스 안에 있습니다. 박스의 구조 각 박스는 아래와 같은 속성들 (properties)을 가지고 있습니다. 콘텐츠 (Content) - 실제 콘텐츠 (아이콘, 텍스트, 이미지 등)이 표시되는 공간입니다. 패딩 (Padding) - 콘텐츠 주위를 둘러싼 빈 공간입니다. 테두리 (Border) - 콘텐츠와 패딩을 감싼 박스입니다. 마진 (Margin) - 박..

이번 글에서는 CSS 선택자의 다양한 종류를 살펴보겠습니다. 뉴스 웹사이트 비슷한 웹페이지를 예시로 다양한 선택자를 이용하여 스타일을 입혀보겠습니다. 헤드라인 기사는 네이버 뉴스 (6/16일 자)에서 가져왔습니다. [HTML는 밑에 더보기로] 더보기 HTML 로그인 회원가입 헤드라인 뉴스 연합뉴스 드론이 밝혀준 범고래 사회 생활…"더 친한" 개체 존재 포토 과학 일반 추천 조선일보 “크리에이터가 돈이야” 애플도 유료 팟캐스트 출시 모바일 추천 조선비즈 한국, 세계에서 두번째로 SNS 많이 한다 인터넷/SNS 추천 이용약관 고객센터 전체 선택자 Universal Selector 페이지의 모든 요소를 선택하는 선택자(*)입니다. 아래 코드로 모든 요소를 선택해 color (글꼴 색)을 보라색으로 지정해보겠습..

CSS에서 다양한 색상 코드를 이용하여 색을 바꾸는 방법에 대해 알아보겠습니다. CSS 글씨 색깔 설정하기 아래는 h1, p, h2, p, button으로 이루어진 기본 HTML 웹페이지입니다. HTML 를 통해 csscolor.css 파일과 연결을 시켜둔 상태입니다. Colors Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident quis magnam ex corrupti incidunt atque et modi quaerat error. Quidem beatae laboriosam ea velit libero mollitia animi ut culpa repudiandae? Heading Lorem ipsum dolor sit ame..

CSS란? CSS란 Cascading Style Sheets의 약자로 웹페이지의 스타일을 정의하는 데 사용됩니다. 프론트엔드 개발자로서 제일 먼저 배우게 되는 세 가지 언어 HTML/CSS/JavaScript 중 하나이기도 합니다. 세 가지 언어의 역할: html: 웹페이지의 기본 틀 (뼈대)를 구성하는 역할 css: 웹페이지를 꾸며주는 역할 Javascript (JS): 동작들을 표현 이미지 출처: geekflare.com 제일 왼쪽에 스타일을 안입힌 순수 html 페이지입니다. 그리고 오른 쪽 두 이미지는 같은 html페이지에 다른 스타일시트를 입힌 웹페이지입니다. 폰트, 색깔, 구조 등 다양한 구성을 바꿀 수가 있습니다. CSS 기초 CSS 언어의 기본 문법: 선택자 { 특성: 값; } 예제 1) ..