나오리의 개발일지 🚴‍♂️=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의 음수는 요소를 기준으로 위쪽 ..

목차 1. Focus(포커스)란? 2. :focus 3. :focus-within 4. :focus-visible Focus(포커스)란? 요소를 클릭하거나 키보드 tab키로 요소에 이동하면 해당 요소는 Focus(포커스) 상태가 된다. 잠깐! Pseudo Class(가상 클래스)를 사용하면 좋은 이유 따로 자바스크립트를 사용하는 작업 없이, CSS만으로 해결이 가능하다. 따라서 단순 스타일링 작업은 최대한 CSS 내에서 해결하자! 이번 포스팅에선 포커스된 요소를 나타내는 3개의 가상 클래스에 대해 알아보자. 1. :focus 태그 등, 포커스를 받은 요소를 나타낸다. See the Pen input focus1 by hayoung-99 (@hayoung-99) on CodePen. 주의 ❗ :focus는..

올해도 벌써 4월입니다! 코드잇 부캠에 참여하면서 언제 이렇게 🌸벚꽃🌸이 만개했나 모를 정도로 시간이 꽤나 지났네용 이번주는 얼른 공부를 끝내고 주말엔 가족과 나들이를 목표로 달릴게요🔥🔥🔥 3/27 javascript 기본 문법 자료형 확인 - typeof 정수, 소수 구분 없이 숫자는 Number 자료형 동등 연산자(==)와 일치 연산자(===) NaN 연산 과정에서 자동 형 변환 탬플릿 문자열 ${ } null과 undefined CSS position 속성 z-index flexbox 레이아웃 3/28 CSS grid 유닉스 command command 단축키 상대경로, 절대경로 사용자의 home 경로 - ~ 여러가지 command - pwd, cd, ls, mkdir, touch, cat, les..

목차 1. px 단위 2. rem 단위 3. em 단위 4. % 단위 1. px 상위 요소에 상관없이 어떤 절대적인 값으로 결정됨. ✅ pixel(픽셀)이란? 화면 해상도를 나타내는 단위로, 화소라고도 한다. pixel 값이 클수록 화면을 더 조밀하게 구성할 수 있다. 2. rem 태그에서 설정한 font-size 속성값을 기준으로 값이 결정된다. html { font-size: 16px; } .box1 { font-size: 1rem; // 16px } .box2 { font-size: 1.5rem; // 24px } .box3 { font-size: 2rem; // 32px } font-size: 1rem; font-size: 1.5rem; font-size: 2rem; 실행 결과 3. em rem과..

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! ✅ 참고로, 여러 스타일에 같은 속성이 중첩될 경우, 가장 마지막에 선언된 속성이 적용된다.

프로그래밍에 있어서 좋은 DX를 위해 적절한 주석을 다는 것은 중요하다. 주요 웹 언어인 HTML, CSS, JS별로 주석을 다는 방법을 공유한다. 1. HTML 2. CSS (1) // 주석 내용 (2) /* 주석 내용 */ // 한 줄 주석처리 시 /* 한 줄로 작성하거나 이처럼 여러 줄을 한 번에 주석처리할 수 있다. */ ✅ html 내부의 태그로 css를 추가하는 경우에도 css 주석 형식인 /* */을 쓰도록 한다. 3. JavaScript (1) // 주석 내용 (2) /* 주석 내용 */ //한 줄 주석처리 시 /* 한 줄로 작성하거나 이처럼 여러 줄을 한 번에 주석처리할 수 있다. */