⏳ 2023. 5. 1. - 2023. 5. 7. flex flex는 주 축(main-axis)과 교차 축(cross-axis) 중 주 축을 기준으로 요소들을 정렬하기 위한 방법이다. 보통 수평으로 정렬하기 위해 사용된다. flex-direction flex-direction: row; -> 행(좌 => 우) row-reverse : 행(우 => 좌) column : 열(위 => 아래) column-reverse : 열(아래 => 위) flex-wrap flex-wrap: nowrap; -> 줄바꿈 없음 wrap : 여러 줄로 묶음 justify-content 주 축의 정렬 방법 jusify-content: flex-start; align-content 교차 축의 여러 줄 정렬 방법 align-conte..

⏳ 2023. 5. 1. - 2023. 5. 7. 글꼴과 문자 line-height 한 줄의 높이. 행간과 유사하다. line-height: normal; -> 브라우저의 기본값 사용 1.4 : 글꼴 크기의 1.4배 text-indent 문자 첫 줄의 들여쓰기. 음수를 사용한다면 내어쓰기가 된다. 배경 background-image div { width: 300px; height: 300px; background-color: orange; background-image: url("https://heropy.blog/css/images/logo.png"); } background-size div { width: 300px; height: 300px; background-color: orange; backg..

⏳ 2023. 4. 24. - 2023. 4. 30. CSS 속성(Property) 한글로는 같은 속성이지만 html의 속성은 attribute, css와 js에서의 속성은 property를 의미한다. 정말 다양한 css 속성이 있는데, 그 중 몇 가지를 알아보자! width & height width와 height의 기본값은 auto(브라우저가 값을 계산)이다. 인라인 요소와 블록 요소에서의 브라우저의 계산 방법이 다르니 알아두자. padding & margin 요소는 기본적으로 다음과 같은 구조를 가진다. padding은 요소의 내부 여백을 의미하며, 사용하면 콘텐츠의 크기가 커진다. margin은 요소의 외부 여백을 의미하며 특이하게도 음수값을 사용할 수 있다. 개별적으로 값을 주기도 하지만, 단축..

⏳ 2023. 4. 24. - 2023. 4. 30. 상속 스타일을 적용했을 때, 적용된 내용이 하위 요소까지 영향을 미치는 것을 스타일 상속이라고 한다. 자연스럽게 상속되는 css 속성들은 모두 글자/문자 관련 속성들이다.(모든 속성은 아님주의!) 강제 상속 코드의 유지 보수 측면에서, 상위 요소의 값을 변경하면 하위 요소의 값도 그에 따라 자동으로 바뀌는 것이 유리한데, 그때 inherit을 사용할 수 있다. .parent { width: 400px; height: 400px; background-color: red; } .child { width: 300px; height: inherit; background-color: orange; } child 요소는 parent 요소의 height 값을 따른..

⏳ 2023. 4. 24. - 2023. 4. 30. 기본 선택자 우선순위 : 전체 < 태그 < 클래스 < 아이디 전체 선택자 *을 사용하여 모든 요소를 선택 * { color: red; font-size: 100px; } 태그 선택자 태그로 선택 div { color: red; font-size: 100px; } 클래스 선택자 .을 사용하여 선택 .box { background-color: blue; padding: 20px; } 아이디 선택자 #을 사용하여 선택 #box { background-color: blue; padding: 20px; } 복합 선택자 일치 선택자 선택자를 동시에 만족하는 요소를 선택 : 모든 선택자를 공백없이 작성 div.orange { color: orange; } div이..

⏳ 2023. 4. 24. - 2023. 4. 30. 기본 문법 선택자 : { 속성: 값; 속성: 값; } div { color: red; font-size: 100px; } /* 주석은 이렇게 */ 선언 방식 내장 html의 head 태그 안에 style 태그를 사용하여 스타일을 적용하는 방법 하나의 html 파일 안에서 스타일을 관리할 수 있지만.. 유지 보수 측면에서 불리하다. html과 css 파일을 구분하는 것이 권장하는 방법!! 인라인 html의 요소에 직접 스타일을 작성하는 방법 인라인 방식은 스타일의 우선 순위가 너무 높기 때문에 유지 보수가 어렵다. 링크 link 태그를 사용하여 css 문서를 연결하는 방법(병렬) 가장 권장하는 방법! @import css 문서 안에서, 또 다른 css ..

⏳ 2023. 4. 10. - 2023. 4. 16. 프론트엔드 개발이란 HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호작용할 수 있도록 하는것 HTML(Hyper Text Markup Language) 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당 CSS(Cascading Style Sheets) 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당 JavaScript 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당 웹 기초 웹앱의 동작원리 웹 어플리케이션은 사용자의 요청(request)과 서버의 응답(response)이 이루어지면서 동작..

해야지.. 해야지.. 하다가 드디어 시작하게 된 블로그. 프론트엔드 개발자를 꿈꾸는 나의 성장 과정과 일상을 담아보려고 한다. 블로그를 시작한 이유 좋은 기회로 시작하게 된 교육 프로그램, 카카오 테크 캠퍼스(이하 카테캠). 수료 기준인 주차별 학습 일지를 작성하며 글쓰기의 맛을 알아버렸다..! (누군가 내 글을 보는 것이 은근 기분 좋고, 복습할 때 굉장히 도움된다.) 학습량은 점점 더 늘어나는데, 나의 노션 스킬로 이를 더 이상 깔끔하게 정리하는 것은 한계라고 느꼈다. 그리고 다른 쿠키즈(카테캠 수강생)들의 기술 블로그를 보니 너무 깔끔한걸? 반드시!! 시작해야겠다!! 아직 낯설지만.. 열심히 써봐야지! 🔥 쉽지는 않았다..! 블로그 작성을 위해 여러 플랫폼들을 알아보았다. 가장 떠올리기 쉬운 네이버..