본문 바로가기

개발공부/Front-end

[HTML, CSS] CSS 페이지 레이아웃 - Flexbox
개발공부/Front-end 2022. 4. 30. [HTML, CSS] CSS 페이지 레이아웃 - Flexbox 콘텐츠 배치를 통해 화면을 나누는 방법이 페이지 레이아웃인데 화면을 수직으로 구분할 것인지 수평으로 구분할 것인지 잘 결정해야 한다. Flexbox를 사용해서 레이아웃을 잡으면 박스를 유연하게 늘리거나 줄여가면서 잡을 수 있다. 1. flexbox 사용하기 부모 박스 요소에 display: flex; 를 적용하면 자식 박스의 방향이나 크기 등을 결정할 수 있는 구성 방법이다. flexbox는 row가 기본 방향값으로 지정되어있는데 flex-direction: column; 으로 바꾸면 수평으로 분할된다. #HTML 코드 예시 box1 box2 box3 #container1 { display: flex; border: 1px solid black; .class1 { border: 1px solid red;..
[HTML, CSS] CSS 텍스트 꾸미기, 박스 모델
개발공부/Front-end 2022. 4. 28. [HTML, CSS] CSS 텍스트 꾸미기, 박스 모델 CSS에서는 텍스트를 꾸미기 위한 다양한 속성이 있다. 1. 색상 color: CSS에서 글자의 색상을 변경하는 속성. RGB가 표현된 값이나 주요 색상의 이름을 사용할 수 있다. background-color: 배경 색상을 지정하는 속성이다. border-color: 박스 테두리 색상을 지정하는 속성이다. .content { color: white; background-color: black; border-color: #c3e6cb; } 2. 글꼴, 크기 font-family: 글꼴을 설정하는 속성이다. 글꼴을 여러 개 설정할 때는 쉼표로 구분하며, 첫번째 글꼴을 찾은 다음 해당 글꼴이 있으면 사용하고 없으면 두번째 글꼴을 사용한다. 전부 없다면 웹브라우저에서 설정한 명조 계열의 글꼴을 사용한다. 글꼴..
[HTML, CSS] CSS 기본 개념, 셀렉터
개발공부/Front-end 2022. 4. 27. [HTML, CSS] CSS 기본 개념, 셀렉터 CSS 개념 CSS는 Cascading Style Sheets의 약자로 HTML이나 XML같은 마크업 언어로 작성된 문서가 어떻게 표현되어야 하는지를 나타내는 스타일 시트(Style Sheets) 언어이다. HTML이 웹 페이지의 전체적인 구조와 내용을 나타내는 반면에, CSS는 각 HTML의 요소를 꾸미는 역할을 담당한다. 1. CSS 기본 문법과 구조 CSS 는 규칙 기반 언어이다. 웹 페이지의 특정 요소나 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의할 수 있다. ex) " h1 요소의 텍스트 색상은 빨간색으로 하고 글자 크기는 크게 표시하고 싶은 경우, 다음과 같은 코드로 나타낼 수 있다. 먼저 스타일을 지정할 HTML 요소를 선택한 뒤에 중괄호 { }를 사용해서 그 안에 속성과 값 쌍의..
[HTML, CSS] HTML 기본
개발공부/Front-end 2022. 4. 27. [HTML, CSS] HTML 기본 오늘은 HTML과 CSS에 대해 학습했다. HTML은 HyperText Markup Language의 약자이고 웹 페이지의 뼈대와 구조를 담당한다. HTML은 태그들()로 요소를 구성하는 마크업 언어이고, 태그명, 속성, 값을 이용해서 표현한다. 태그 이름은 꺽쇄 괄호()로 감싸고 있으며, HTML 태그는 보통 시작 태그(start tag)와 종료 태그(end tag) 한 쌍으로 이루어져있다. #태그 예시 Content goes here... This is a heading This is a paragraph. This is another paragraph. h1은 헤더 태그 중 하나이고 p는 paragraph (단락)을 뜻하는 태그 종류이다. 아래의 이미지는 기본적인 HTML 구조를 나타낸다. 속성 속..

티스토리툴바