분류 전체보기 279

#6. CSS Layout 속성

CSS 레이아웃 속성은 HTML 문서의 요소를 배치하는 데 사용됩니다. 웹 페이지의 요소를 정렬하고 레이아웃을 설계하는 데 큰 도움이 됩니다. 또한, 반응형 웹 디자인을 구현하기 위해서는 레이아웃 속성이 자주 사용됩니다. 예를 들어, 작은 화면에서의 레이아웃과 큰 화면에서의 레이아웃이 다르도록 만들 수 있습니다. display: 요소가 생성해야 하는 박스의 유형을 지정합니다. 일반적인 값으로는 block, inline, inline-block, none이 있습니다. float: 요소를 플로팅 요소로 위치 지정하고, 텍스트와 인라인 요소가 그 주위로 감싸도록 합니다. left와 right 값은 요소를 컨테이너의 왼쪽 또는 오른쪽에 플로팅하는 경우에 자주 사용됩니다. clear: 요소가 플로팅 요소와 옆에 ..

#5. CSS Background 속성

CSS background 속성은 HTML 요소의 배경을 스타일링하는데 사용됩니다. • background-color: 배경의 색상을 지정합니다. CSS 색상 값이나 색상 이름을 사용할 수 있습니다. • background-image: 배경에 사용할 이미지의 URL을 지정합니다. 만약 이미지가 없는 경우, 배경은 빈 것으로 나타납니다. • background-repeat: 배경 이미지가 반복되는 방식을 지정합니다. "repeat"를 사용하면 가로와 세로 모두에서 반복됩니다. "repeat-x"를 사용하면 가로에서만 반복되고, "repeat-y"를 사용하면 세로에서만 반복됩니다. "no-repeat"을 사용하면 반복되지 않습니다. • background-position: 배경 이미지의 위치를 지정합니다. ..

#4. CSS Text 속성

text 속성은 텍스트의 모양과 레이아웃을 정의할 때 사용됩니다. text 속성을 사용하여 다음과 같은 요소를 정의할 수 있습니다: font-family: 이 속성은 요소의 폰트 패밀리를 설정합니다. 예를 들어, Arial, Times New Roman, 또는 Verdana입니다. 브라우저는 목록에서 첫 번째 사용 가능한 폰트를 찾습니다. font-size: 이 속성은 텍스트의 크기를 설정합니다. 값은 픽셀, em, 또는 백분율로 지정할 수 있습니다. font-weight: 이 속성은 텍스트의 굵기를 설정합니다. 값은 normal, bold, 또는 100에서 900 사이의 숫자 값으로 설정할 수 있습니다. color: 이 속성은 텍스트의 색상을 설정합니다. 값은 이름으로 지정된 색상, 16진수 값, 또는..

#3. CSS Box Model

Box Model은 HTML 요소가 화면에서 어떻게 보일지 결정하는 기본 개념입니다. Box Model은 요소의 콘텐츠, 패딩, 테두리, 마진을 포함하는 박스로 생각할 수 있습니다. margin: 박스의 주변을 둘러싸는 공간입니다. margin은 다른 요소와의 거리를 정의하며, 마진은 박스 자체의 크기에는 포함되지 않습니다. padding: 콘텐츠와 테두리 사이의 공간입니다. padding은 박스의 크기에 포함됩니다. border: 테두리를 정의합니다. 테두리는 박스의 크기에 포함됩니다. width: 박스의 가로 크기를 정의합니다. height: 박스의 세로 크기를 정의합니다. 예제 코드: div { width: 200px; height: 200px; padding: 20px; margin: 20px; ..

#2. CSS 선택자

# 선택자 선택자는 CSS 스타일을 적용할 HTML 요소를 선택하는 방법입니다. 아래는 선택자의 종류입니다: 유형 선택자(Type selector): HTML 요소의 종류를 기준으로 선택합니다. (ex. h1, p, div) 클래스 선택자(Class selector): HTML 요소에 class 속성을 기준으로 선택합니다. (ex. .class-name) 아이디 선택자(ID selector): HTML 요소에 id 속성을 기준으로 선택합니다. (ex. #id-name) 전체 선택자(Universal selector): 모든 HTML 요소를 선택합니다. (*) 속성 선택자(Attribute selector): HTML 요소의 속성 값을 기준으로 선택합니다. (ex. [attribute="value"]) 자..

#1. CSS 소개

# CSS는 무엇인가? CSS(Cascading Style Sheets)는 HTML 또는 XML 문서에서 요소의 디자인과 레이아웃을 정의하는 스타일 정의 언어입니다. HTML은 웹 페이지의 내용을 정의하고, CSS는 그 내용이 어떻게 표시되는지 정의합니다. CSS를 사용하면 한 HTML 문서에서 적용된 디자인을 모든 페이지에서 공유할 수 있습니다. 또한, 페이지의 디자인을 변경할 때마다 HTML 문서의 코드를 수정할 필요 없이 CSS 파일만 수정하면 됩니다. CSS는 다양한 속성을 제공하여 텍스트 크기, 폰트, 배경색, 마진, 패딩, 레이아웃 등을 정의할 수 있습니다. 또한 CSS는 요소를 정렬하고, 박스 모델을 적용하여 각 요소의 크기와 위치를 정의할 수 있습니다. CSS는 스타일 정의를 위해 선택자와..

가볍게 훑어보는 HTML5

#1. HTML 소개 • HTML이란 무엇인가? • HTML의 역사 • HTML 개발 환경 설정 #2. HTML 문서의 구조 • DOCTYPE 선언 • HTML 태그 • Head 태그 • Title 태그 • Body 태그 #3. HTML 제목과 단락 • 제목 (h1에서 h6) • 단락 태그 (p) #4. HTML 텍스트 서식 • 굵은 텍스트 • 기울임꼴 텍스트 • 밑줄 텍스트 • 아래첨자와 위첨자 • 줄임말 태그 #5. HTML 목록 • 순서가 없는 목록 • 순서가 있는 목록 • 정의 목록 #6. HTML 링크 • 앵커 태그 • 상대 URL • 절대 URL • 이메일 링크 • target 속성 #7. HTML 이미지 • 이미지 태그 • 이미지 사이즈 • alt 속성 • 이미지 맵 #8. HTML 테이블 ..

#12. HTML 고급 주제

# HTML5에서 새로 추가된 요소들 : 독립적이고 재사용 가능한 콘텐츠를 나타내는 엘리먼트입니다. : 본문과 관련되어있지만, 본문의 흐름에서 분리된 콘텐츠를 나타냅니다. : 오디오 콘텐츠를 제공하는 엘리먼트입니다. : 동적인 그래픽을 그릴 수 있는 태그입니다. : 드롭다운 목록을 만들 때 사용되는 엘리먼트입니다. : 사용자가 펼칠 수 있는 세부적인 정보를 표시하는 엘리먼트입니다. : 대화상자 형식의 모달 창을 구현할 때 사용하는 엘리먼트입니다. : 엘리먼트에 대한 캡션을 제공하는 엘리먼트입니다. : 일련의 연관된 이미지, 그래픽, 캡션 등을 그룹핑할 때 사용 # 폼 유효성 검사 HTML5에서는 폼 유효성 검사를 통해 폼 제출 전에 사용자가 입력한 데이터가 유효한지 확인할 수 있습니다. required ..

#11. HTML 미디어 요소

HTML의 미디어 요소는 웹사이트에 미디어 콘텐츠(오디오, 비디오, 이미지 등)를 삽입하는데 사용됩니다. 요소는 웹사이트에 오디오 파일을 삽입하는데 사용됩니다. 요소는 웹사이트에 비디오 파일을 삽입하는데 사용됩니다. 요소는 웹사이트에 이미지 파일을 삽입하는데 사용됩니다. 요소는 다양한 크기와 화질의 이미지를 표시할 수 있는 유연성을 제공합니다. 요소는 미디어 요소와 관련된 설명 텍스트를 그룹으로 묶어주는데 사용됩니다. 위의 요소들은 미디어 소스를 지정하고, 컨트롤러(재생, 정지, 볼륨 등)를 제공하는 등의 추가적인 속성을 가질 수 있습니다. # Audio 태그는 HTML5에서 추가된 미디어 요소 중 하나로, 웹사이트에 오디오 파일을 삽입하는데 사용됩니다. 다음은 태그의 기본 구조입니다. 접속한 브라우저는..

#10. HTML 시맨틱 요소

HTML의 시멘틱 요소는 HTML 마크업 언어의 요소에 대한 의미를 나타내는 것입니다. 이러한 요소를 사용하면 HTML 문서가 보다 구조화되고 의미있는 형태로 표시될 수 있습니다. 시멘틱 요소 중에서 주요한 것으로는 다음과 같습니다: : 문서의 헤더 부분을 나타내는 요소입니다. : 네비게이션 메뉴를 나타내는 요소입니다. : 문서의 주요 콘텐츠를 나타내는 요소입니다. : 독립적인 콘텐츠 내용을 나타내는 요소입니다. : 문서내의 구역을 나타내는 요소입니다. : 문서의 기사와 관련이 없는 콘텐츠를 나타내는 요소입니다. : 문서의 푸터 부분을 나타내는 요소입니다. 시멘틱 요소를 사용하면 문서의 구조와 의미를 더욱 명확하게 표시할 수 있어서, 검색 엔진의 순위를 향상시킬 수 있습니다. 시멘틱 요소를 사용하면 검색..

반응형