4전 4전

이번 패스트캠퍼스X야놀자 부트캠프 프론트엔드 과정의 HTML/CSS 과제에 대해 이야기해보려 합니다. 과제 주제 : 자신이 원하는 사이트 레이아웃 클론 1. 클론 한 사이트 클론 한 사이트 https://www.pinkfong.com/ko/index.html Pinkfong Official Website www.pinkfong.com 클론 할 사이트로는 핑크퐁 공식 사이트를 골랐는데 이유는 먼저 레이아웃이 크게 복잡하지 않고, 깔끔한 스크롤 애니메이션이 적절하게 있어서 골랐습니다. 2. 구현한 내용 레이아웃 구성 레이아웃 구성으로는 크게 header, main, footer로 나눠서 작업을 하였습니다. - header 먼저 헤더는 logo, navigation, sotial의 3가지 부분을 dispaly..

css에서 backdrop-filter를 사용하면 요소 뒤에 있는 영역에 시각적 필터를 적용할 수 있습니다. | 사용 1. 사용법 backdrop-filter에 blur() 함수를 사용하면 요소 뒤의 배경에 반투명한 배경을 적용해 줍니다. .blur { backdrop-filter:blur(10px); } 이런 식으로 사용하면 되고 값에 % 나 px 등을 사용하여 투명 강도를 설정해 줄 수 있습니다. 2. 스타일 적용 blur .back-ground { background-image: url("https://picsum.photos/300/300"); width: 300px; height: 300px; display:flex; justify-content: center; align-items: cente..

css에서 사용자 변수를 사용하면 반복적으로 사용되는 값을 변수에 저장하고 이를 여러 곳에서 참조할 수 있습니다. | 사용 1. 변수 선언 CSS에서 변수를 선언할 때는 '--'를 접두사로 사용해서 변수 이름을 정의하면 됩니다. :root { --main-color: red; } 보통 변수를 선언할 때 :root 선택자를 사용합니다. → :root 선택자는 HTML문서에서 최상위 요소를 나타냄 위에 코드에서는 :root 선택자를 사용해서 문서의 루트요소에 '--main-color'라는 변수를 선언하고 변수의 초기값을 빨간색인 red로 지정해 주었습니다. 2. 변수 사용 선언한 css변수를 사용하고 싶으면 var() 함수를 사용해 변수 이름을 참조하면 됩니다. div { background-color: v..

rem, em 은 요소의 크기를 결정해 주는 단위들입니다. | rem rem 은 최상위 요소의 폰트 크기를 기준으로 요소의 폰트크기를 정해줍니다. html { font-size: 16px; } div { font-size: 1rem; /* 16px */ } div { font-size: 2rem; /* 32px */ } | em em은 부모요소의 폰트 크기를 기준으로 요소의 폰트크기를 정해줍니다. div { font-size: 30px; } div span { font-size: 1em; /* 30px */ } div span { font-size: 2em; /* 60px */ }

overflow는 요소의 내용물이 해당요소를 감싸고 있는 컨테이너의 크기를 넘어가면 어떤 식으로 처리를 할지 정해줄 수 있습니다. | 속성값 1. visible 이 속성은 기본값으로 컨테이너를 넘어가는 내용물을 컨테이너 외부에 그대로 표시돼서 다른 콘텐츠를 가릴 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 2. hidden 이 속성은 컨테이너를 넘아가는 내용물을 자르고 안 보이게 숨겨줍니다. HTML 삽입 미리보기할 수 없는 소스 3. scroll 이 속성은 스크롤 막대가 컨테이너에 추가돼서 내용물을 스크롤하면서 볼 수 있습니다. 하지만 내용물이 컨테이너를 넘지 않아도 항상 스크롤이 표시됩니다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 4. auto 이 속성..

CSS에서 position 속성은 HTML요소가 위치하는 방식을 정해줍니다. 또한 속성값에 따라서 top, left, bottom, right로 요소의 위치를 지정해 줄 수 있습니다. | 속성 값 1. static static값은 기본값입니다. HTML 요소가 문서의 일반 흐름에 따라서 배치가 되고, top, left, bottom, right 같은 속성값을 사용할 수 없습니다. HTML 삽입 미리보기할 수 없는 소스 2. relative relative값은 HTML요소를 원래 위치에 상대적으로 위치시킬 수 있습니다. top, left, bottom, right 속성값을 사용하여 위치시킬 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 3. absolute absolute값은 HTML요소를 가장 가..

white-space는 요소 내의 공백문자를 처리하는 방법을 정해주는 속성입니다. | 속성 값 1. normal 이 값은 기본값으로 연속된 공백이 있으면 하나로 합치고 한 줄이 너무 길면 자동으로 줄 바꿈을 해줍니다. HTML 삽입 미리보기할 수 없는 소스 2. nowrap 이 값은 연속된 공백이 있으면 하나로 합치고 줄 바꿈을 방지해서 한 줄에 모든 내용이 표시됩니다. HTML 삽입 미리보기할 수 없는 소스 → 태그로 줄 바꿈 가능 3. pre 이 값은 요소 내의 모든 공백문자와 줄 바꿈을 유지해 줍니다. 따라서 html코드에 나타나는 대로 표시해 줍니다. Lorem ipsum dolor sit amet consec tetur adipisicing elit. Eius culpa, harum HTML 삽..

flex는 웹페이지의 레이아웃을 만들 때 사용하는 방법 중 하나입니다. flex를 사용하면 크기나 내용에 관계없이 요소들을 쉽게 정렬할 수 있습니다. | 구조 정렬하고 싶은 요소들의 부모박스(container)에 display: flex 속성을 부여하면 됩니다. 박스1 박스2 박스3 .container { background-color:yellow; display: flex; } .box { background-color: orange } HTML 삽입 미리보기할 수 없는 소스 기본적으로 flex박스내부의 요소들은 같은 간격으로 한 줄로 배열됩니다. | 속성 이제 flex 컨테이너를 만들었으면 여러 가지 속성을 이용해 컨테이너의 레이아웃을 만들 수 있습니다. 일반적으로 가장 많이 사용하는 속성은 다음과 ..