choco's story

CSS 기본 문법CSS의 가장 기초적인 코드 구조는 다음과 같습니다.선택자{ 속성명: 속성값;}선택자 : 어떤 요소에 스타일을 적용할지에 대한 정보{ 중괄호 } : 선택한 요소에 적용할 스타일을 정의하는 영역속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보 (색상, 크기 등)속성값 : 어떻게 정의하고 싶은지에 대한 정보ex)p{ color: red;}이 예시의 코드는 p 태그에 스타일을 적용한다는 뜻입니다.p{...} 안에 텍스트 색을 뜻하는 color 속성을 red로 정의합니다.CSS 주석 사용CSS 문서에서도 .html과 똑같이 주석을 사용할 수 있습니다!ex)p{ /* css 문서의 주석 처리 */ /* color: red; */}CSS 문서는 위처럼 주석을 사용할 수 있습니다. 이러면 ..

CSS 알아보기CSS = Cascading Style SheetsCascading : 계단식Style : 스타일Sheets : 문서 한 장즉, CSS는 "계단식으로 스타일 규칙들이 적용될 수 있도록 정의하는 스타일 문서"를 뜻합니다!CSS란?: 웹 페이지의 디자인과 레이아웃 정의에 사용되는 스타일시트 언어CSS는 .html 문서에 스타일, 즉 디자인을 더해줍니다. 정리하면 다음과 같습니다.HTML : 웹 문서의 콘텐츠를 구성하는 언어CSS : 웹 문서의 콘텐츠에 스타일을 추가하는 언어 (색상, 크기, 위치 등)CSS 문서(코드) 자체는 독립적으로 존재할 수 있지만, CSS 자체가 .html 문서의 스타일을 정의하는 것이니 따로 존재해도 의미가 없습니다.그러니까 .html 문서와 함께 있는 것이 아니라면..

select 태그 ~ 태그란?: 여러 옵션(선택지)들을 제공해주는 컨트롤 생성 태그select 태그를 사용하면 여러 선택지 중 하나를 고를 수 있는 메뉴 형식의 콘텐츠가 만들어집니다. 간단히 말하면 "드롭다운"을 만들어줍니다.이때 ~ 태그 안의 각 선택지들은 option 태그를 사용합니다.select 태그도 각 요소마다 name을 지정할 수 있습니다. 젤리 쿠키이 코드를 보면 select 태그 안에 name 속성을 넣어서 어떤 옵션들이 있는지 안내합니다.또한 각각의 option마다 value 속성을 지정할 수 있습니다. 여기서 value는 실제로 처리될 값을 뜻합니다.이제 직접 예시를 통해 알아보도록 하겠습니다.select 태그 예시 먹고 싶은 간식 선택 사탕 ..

input 태그input 태그란?: 사용자로부터 데이터를 입력받기 위한 대화형 컨트롤 콘텐츠를 만들 수 있는 단일 태그 (인라인 요소)type의 속성값이 무엇인지에 따라 입력 요소의 형태나 입력하는 데이터의 유형이 달라집니다.type 외에도 여러 가지 속성을 통해 세부적인 조절이 가능합니다.이 코드는이런 식으로 input 입력칸을 만듭니다. 지정한 name 속성에 따라 알맞은 것들을 입력하면 됩니다.ex) 왼쪽은 닉네임, 오른쪽은 직업...이제 직접 여러 입력 요소들을 코드를 통해 구현해보도록 하겠습니다!입력 요소 구현 예시 여기서 input 내부의 속성들이 무엇인지 각각 알아보도록 하겠습니다.먼저 type은 input이 어떤 컨트롤 기능을 갖고 있는지를 제공해주는 속성입니다. 해당 속성..