나오리의 개발일지 🚴‍♂️=3

목차 1. box-shadow 속성 2. x offset, y offset 3. blur 4. spread radius 5. color 요소에 그림자 효과를 넣을 수 있는 box-shadow 속성에 대해 알아보자. 형식: box-shadow: [x offset] [y offset] [blur] [spread radius] [color] ✅ x offset과 y offset은 필수로 기입한다. 1. x offset & y offset x축과 y축의 그림자 offset을 설정한다. .box { box-shadow: 10px 20px; } x offset의 음수는 요소를 기준으로 왼쪽 그림자가 형성된다. .box { box-shadow: -20px 20px; } y offset의 음수는 요소를 기준으로 위쪽 ..

width, height 속성을 이용해 박스 사이즈를 설정할 때, padding이나 border 속성으로 인해 의도치 않게 box 사이즈가 더 크게 설정될 수 있다. .box { width: 260px; height: 90px; border-radius: 8px; border: 3px solid #dbd9ff; padding: 20px; } ✅ 만약 box의 크기를 width, height 그대로 설정하고 싶다면, bix-sizing: border-box;를 설정한다. box-sizing: border-box box 크기를 border, padding 속성에 상관없이 무조건 지정한 widht, height로 설정되고, 내부 content 크기는 box 사이즈에서 border, padding 값을 뺀 크기..

목차 1. Overflow란? 2. overflow: visible 3. overflow: hidden 4. overflow: scroll 5. overflow: auto Overflow란? '넘쳐 흐른다'는 뜻으로, 주로 프로그래밍 분야에서 데이터가 특정 영역보다 넘치는 경우를 뜻한다. CSS도 이러한 뜻으로 overflow 속성이 있으며, 다양한 옵션에 대해 소개한다. ✅ x축, y축을 한 번에 설정할 수 있는 overflow 속성과, x축, y축을 각각 설정할 수 있는 overflow-x와 overflow-y 속성이 있다. 1. overflow: visible; 기본값으로, content 크기가 box보다 넘칠 때, 넘친 내용물이 그대로 보여진다. 2. overflow: hidden; 넘친 내용물을..

위처럼 알림 아이콘을 눌렀을 때 알림창이 뜨도록 구현하는 과정에서, 벨 아이콘을 기준으로 알림창을 가운데 정렬해야 했는데, 여러 삽질 끝에 해결책을 찾았다 🎉 ✅ 참고로 나는 알림 아이콘 컴포넌트 하위에 알림창 컴포넌트를 조건부로 렌더링하도록 설계했다. 미래의 내가 또 삽질로 고생하지 않도록 이번 기회에 정리해본다. 이번 글에선 위와 같이 부모 요소를 기준으로 자식 요소를 가운데 정렬시키는 방법에 대해 알아본다. 1. 가로+세로 한가운데 정렬하기 ✅ 정렬 기준인 부모 태그에 position: relative를 설정한다. /* 자식 div 태그 */ .children { /* absolute는 포지셔닝된 가장 가까운 부모를 기준으로 자식을 포지셔닝한다. */ position: absolute; top: 5..

목차 1. display란? 2. inline 속성 3. block 속성 4. inline-block 속성 display란? 태그들 간에 위치를 어떻게 표시할지 설정할 수 있는 속성 display 정의 형식 display: 속성값; 올 수 있는 속성값들 inline block inline-block flex list-item 등등 다양하며, 더 많은 속성은 아래의 링크를 참고한다. display - CSS: Cascading Style Sheets | MDN The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow lay..

html 내의 이나 css 파일에서 정의한 스타일들을 한 태그 내에 여러 개 적용하는 방법에 대해 알아보자. .style1 { ... } .style2 { ... } .style3 { ... } 위처럼 여러 스타일들이 있을 때, 한 태그(요소)에 여러 스타일을 일괄 적용하고 싶은 경우, class="style1 style2 style3..." 의 형식으로 작성해준다. Hello, HTML! ✅ 참고로, 여러 스타일에 같은 속성이 중첩될 경우, 가장 마지막에 선언된 속성이 적용된다.

margin과 padding margin은 각 요소들 사이의 여백을, padding은 하나의 요소에서 컨텐츠와 border 사이의 여백을 의미한다. 1. margin margin-top margin-right margin-bottom margin-left 예시 (1) h1 { margin-left: 15px; } Q. 이 때 나머지 속성값은 어떤가? A. 해당 태그에 기본적으로 설정돼있는 margin을 유지한다. ✅ 참고로 태그는 기본적으로 margin-top과 magin-bottom이 21.440px이다. 예시 (2) h1 { margin-top: 15px; } Q. 이 때 나머지 속성값은 어떤가? A. 태그의 margin-top이 15px로 설정되고, 앞서 말했듯이 기본값인 margin-bottom:..

목차 1. border 만들기 - border 2. border 둥글게 만들기 - border-radius 1. border 만들기 border 속성을 통해 border를 만들 수 있다. (1) solid (실선) h1 { border: 5px solid red; } border 두께를 5px border 선 유형을 solid(실선) border 색상을 red (2) dotted (점선) h1 { border: 5px dotted red; } border 두께를 5px border 선 유형을 dotted(점선) border 색상을 red (3) dashed (파선) h1 { border: 5px dashed red; } border 두께를 5px border 선 유형을 dashed(파선) border 색..

목차 1. 태그 & 태그 2. 태그 & 태그 텍스트를 강조할 수 있는 4개의 HTML 태그들에 대해 알아보자 1. 태그 & 태그 두 태그 모두 해당 태그가 감싼 내용을 굵게 표시해준다. 안녕하세요 저는 홍길동입니다. 안녕하세요 저는 홍길동입니다. 두 태그 모두 텍스트를 굵게 표시함을 볼 수 있다. 태그와 태그의 차이점 그렇다면 두 태그를 왜 따로 만든 걸까? 태그는 그저 우리가 글을 쓸 때 강조하기 위해 굵은 글씨로 만들어준다면, 태그는 우리에게 시각적으로 보여줄 뿐만 아니라 스크린리더(장애인을 위한 텍스트 음성 소프트웨어 등)에서 해당 텍스트를 강조하여 발음할 수 있게끔 지원한다. 같은 맥락으로 뒤에 소개할 태그, 태그도 마찬가지이다. 2. 태그 & 태그 두 태그 모두 해당 태그가 감싼 내용을 기울임꼴..

👿 잘 코딩하고 있다가 갑자기 한글 인식이 안돼서 외계어로 나타나는 경우가 종종 있다. 그럴 때마다 항상 구글링하며 찾아야 해서 귀찮았는데, 이참에 한글 깨짐 현상에 대해 해결할 수 있는 방법들에 대해 정리하고자 한다. 1. 으로 설정 한글 인식이 가능한 utf-8(유니코드) 인코딩을 할 것임을 미리 html로 웹 브라우저 측에게 알려준다. 2. 웹 브라우저 자체 내에서 인코딩 설정 각 웹 브라우저별로 인코딩 설정에 들어가는 방법은 다음 글을 참고한다. 깨진 텍스트의 인코딩 설정 - Google Merchant Center 고객센터 도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요 support.google.com 인코딩 설정 방법은 각 웹 브라우저마다 다르겠지만 어쨌든 인코딩 설정으로 들어가..