개발자 퉁이리

Flexbox Flexbox는 반응형 레이아웃 및 구성 요소를 만드는 데 사용된다. Flexbox는 CSS3 레이아웃으로 사용자 인터페이스에 대해 최적화된 배치를 해준다. 지금부터 행과 열 형태로 레이아웃을 구성하는 Flexbox에 대해 알아보자 Flexbox 적용법 display : flex; 적용법은 간단하다. Flexbox를 적용하고 싶은 레이아웃에 대해 display 속성을 flex로 설정하면 된다. FlexBox를 설정하면 여러 속성을 활용하여 커스터마이징을 할 수 있다. 위 사진을 보면 여러 속성이 있는 것을 확인할 수 있다. 기본 Flexbox 속성들을 지금부터 알아보자. Flexbox 속성 main axis main-start | main-end main size cross axis cro..

가상 요소(의사 요소) 가상 요소 ::before, ::after는 CSS만으로 특정 부분에 스타일을 지정할 수 있게 도와주는 키워드다. 가상요소 중 ::before, ::after가 대표적이다. 해당 가상 요소(::before, ::after)를 사용하면 요소의 시작부분이나 끝 부분에 스타일을 추가할 수 있다. 티스토리 블로그 개발자 퉁이리 위의 HTML 코드를 예시로, 화면엔 위와 같이 출력된다. 😁 ::before 여기에 가상요소 ::before를 이용해 CSS를 추가해보자. 티스토리 블로그 개발자 퉁이리 위 코드와 같이 추가했다. li 앞에 "👿"가 추가되어야 한다. 화면을 보면 정상적으로 적용되었다. 😁 ::after 추가적으로 가상 요소 ::after도 추가해보자. 티스토리 블로그 개발자 퉁이..

EM과 REM 고정적인 값이 아닌 상대적인 값을 표현해주어서 EM과 REM을 사용한다. 🔎 REM 페이지의 최상위 요소인 HTML 요소의 폰트 크기를 기준으로 크기를 정한다. font-size: 11rem; 💨 REM 장점 상속에 상관없이 일괄된 크기를 반환해준다. 따라서 별다른 번거로움 없이 반응형 크기 사용이 가능하여 기본적으로 REM을 사용하면 된다. VS 🔎 EM 상위 요소의 폰트 크기를 기준으로 크기를 정한다. font-size: 11em; 💨 EM 장점 상속에 의하여 크기를 반환해준다. 따라서 상속을 고려하여 신중히 사용해주면 보다 디테일하게 구현 가능하다. REM과 EM을 사용하면 반응형 웹사이트를 손쉽게 구현할 수 있다. 상황에 맞게 적절히 사용해주자 좋아요는 로그인하지 않아도 누를 수 있..

CSS 박스 모델 모든 HTML 요소는 박스 모양으로 구성되고 네 영역으로 이루어진다. 박스 모델은 Chrome 기준 F12를 누르면 Element Style 부분에서 바로 만나볼 수 있다. 네 가지 영역 내용 패딩 테두리 마진 1️⃣ 내용 텍스트나 이미지 등의 내용이 표시되는 영역이다. 폭과 높이로 크기를 지정할 수 있다. width:111px; height:111px; 2️⃣ 패딩 콘텐츠 내용과 테두리 사이의 여백 영역이다. 패딩은 눈에 보이지 않고, 마이너스 값의 지정도 가능하다. padding: 11px 11px 11px 11px; padding-top:11px; padding-bottom:11px; 3️⃣ 테두리 패딩과 마진의 경계에 있는 테두리이다. 테두리의 두께와 색상 등의 설정이 가능하다...

CSS 선택자 CSS 선택자는 style을 적용하고자 하는 HTML 요소를 선택자로 특정하여 스타일을 정의하는 것을 말한다. CSS 선택자 종류 📃 전체 선택자 📃 TAG 선택자 📃 ID 선택자 📃 CLASS 선택자 📃 자손 선택자 📃 자식 선택자 📃 인접 형제 선택자 📃 동적 선택자 📃 구조 의사 클래스 선택자 📃 전체 선택자 HTML 문서 내의 모든 요소를 선택한다. * { } 📃 TAG 선택자 지정된 태그명을 가진 요소를 선택한다. element { } 📃 ID 선택자 지정된 ID를 가진 요소를 선택한다. (선택자 앞에 #를 붙인다.) #ID { } 📃 CLASS 선택자 지정된 CLASS를 가진 요소를 선택한다. (선택자 앞에 .를 붙인다.) .CLASS { } 📃 자손 선택자 A 선택자의 하위 선..

CSS 정의 css는 Cascading Style Sheets의 약자로 HTML과 같은 문서의 스타일을 꾸밀 때 사용하는 언어다. HTML이란? [WEB] HTML이란? (1/3) [WEB] HTML 기본 형식 (2/3) [WEB] HTML 자주 사용하는 태그 순위 (3/3) CSS 탄생 배경 사람들은 HTML으로 문서를 만들고 보는 것에 만족하지 않았다. 문서를 좀 더 보기 좋고 예쁘게 꾸미고 싶었다. 그리고 사람들은 곧 두 가지 방안을 제시했다. 하나는 기존 HTML에 디자인 태그 추가, 다른 하나는 새로운 디자인 언어를 만드는 것이다. 결과적으로는 기존의 HTML에 디자인 기능 추가보다 유지보수가 편리한 새로운 언어 CSS를 만들었다. CSS 사용법 스타일을 지정할 HTML 요소를 선택한다. 그리고..