컴퓨터 IT/HTML, CSS
CSS margin collapsing (마진 겹침)
CSS margin collapsing (마진 겹침)
2023.04.03CSS margin collapsing (마진 겹침) top/bottom 마진이 겹치는 현상을 margin collapsing이라고 부릅니다. 마진 사이즈가 같을 땐, 하나의 사이즈로, 마진이 서로 다르다면 큰 쪽으로 겹쳐지는 현상을 말합니다. 1. 인접 형제 (adjacent siblings) 바깥쪽 여백(margin)을 가진 두 인접 형제(adjacent sibling)가 겹쳤을 때, margin collapsing 현상이 발생합니다. 아래 그림에서 노란색 부분이 margin입니다. 똑같은 인접 형제가 위아래로 있다고 가정했을 때, 두 마진은 더해져서 더 큰 마진을 만드는 것이 아닌, 공통부분을 공유하여 합쳐집니다. 2. 첫째/마지막의 자식에 margin이 설정된 부모 첫 번째 또는 마지막 자식 요소..
CSS 박스 모델 padding border 개념
CSS 박스 모델 padding border 개념
2023.03.28CSS 박스 모델 기본 개념 CSS를 공부할 때 가장 기초가 되는 개념이 박스 모델입니다. content, padding, border, margin 개념이 갑자기 쏟아져 나옵니다! 배울 때는 분명 '아하 그렇지' 알겠는데, 막상 사용하려고 하면 '언제 padding을 쓰고 언제 border를 쓰는 거지?' 헷갈립니다. 시간이 지나면 뭐가 내용에 가까운 거였고, 뭐가 border 밖이었지? 잊기도 합니다. 아래 그림을 보면 더 이상 헷갈리지 않을 거예요! 1. 사람: content입니다. 사람은 중요하니까요. 가장 중심에 있습니다. 2. padding: 사람이 패딩 외투를 입고 있습니다. content를 감싸고 있어요. 3. border: 울타리입니다. 울타리는 경계를 의미하죠! 4. margin: 울타..
CSS 클래스 선택자(selector) 기본 개념
CSS 클래스 선택자(selector) 기본 개념
2023.03.28CSS 선택자 종류 아래 코드를 보고 어느 선택자인지 설명할 수 있다면 이 포스트는 읽지 않아도 됩니다. 이번 포스트는 CSS 셀렉터! selector 선택자와 관련된 기본 개념을 다룹니다. h1 { color: red;} * { color: blue;} [disabled]{color:red;} .my-class{color:blue;} #my-id{color:red;} CSS를 따로 공부하지 않고 클론 코딩을 들으면 정말 헷갈립니다. "use id selector, write const myBtn = document.getElementById" '잠시만 셀렉터가 뭐지?' "use class selector, write const myClass = document.querySelector" '아까는 id였..
CSS 자식 형제 자손 결합자 정리
CSS 자식 형제 자손 결합자 정리
2023.03.27CSS 자식 형제 자손 자식 선택자, 형제 선택자, 자손 선택자 조합 선택자 (combinator)를 알아보는 포스팅입니다! + ~ > " "(스페이스)는 보통 한 번에 배우는 개념인데, 헷갈리기 쉬운 + ~ > " "을 예시와 함께 정리했습니다. 우선 Combinator 조합 선택자는 무슨 의미인지 알아보고 넘어가겠습니다. 조합 선택자는 기본 선택자 2개 이상을 한 번에 사용하는 선택자입니다. 인접 형제 adjacent Sibling (+) : 바로 뒤 자식 Child Combinator (>) : 직속 자식 일반 형제 General sibling combinator (~) : 같은 부모 자손 Descendant combinator (" " 스페이스) : 직속 부모 아니어도 ok 그림은 아래 코드의 예..
HTML 태그 우선순위
HTML 태그 우선순위
2023.01.30HTML이란 Hyper Text Markup Language를 말합니다. 이번 포스트에서는 자주 사용되는 HTML 태그를 소개합니다. HTML 태그 우선순위 모음 혹시 중학교, 고등학교 시절에 "우선순위 영단어"로 영어단어 공부를 해보신 경험이 있으신가요? 제가 중학생 때 주변 친구들이 많이 많이 봤던 책인데요, 많이 사용되는 영어 단어 순으로 나열되어있어 실전 영어 독해에 도움을 주는 책이어서 저희 때 베스트셀러였습니다. HTML 태그도 우선순위 영단어처럼 공부하면 어떨까요? HTML 태그는 150개 이상입니다. 150개 태그를 모두 자유자재로 사용할 줄 알면 좋겠지만, 저희에게는 시간이 없습니다. 우선순위로 공부한다면 보다 실전에서 HTML 태그를 사용하기 좋을 것입니다. HTML 순위 아래 사이트에..
자바스크립트 HTML Template 태그
자바스크립트 HTML Template 태그
2022.12.15Javascript 파일에서 innerHTML을 사용해서 HTML 코드를 사용할 수 있지만, template 태그로 html 코드 상에서 미리 구현해 놓은 것을 사용하면 더욱 깔끔한 코딩이 가능합니다. Template 사용 전 코드 JavaScript 코드 const toolElement = document.createElement('div'); toolElement.innerHTML = ` Merry Christmas! I am so happy `; Template 사용 코드 JavaScript 코드 const toolElement = document.createElement('div'); const toolTemplate = document.getElementById('tool'); const too..
CSS background 꽉차게 넣는 방법
CSS background 꽉차게 넣는 방법
2022.12.12이번 포스트에서는 CSS background 프로퍼티를 다룹니다. CSS background #overview{ background: url("css.jpg"); width: 100%; height: 528px; padding: 10px; margin-top: 43px; position: relative; } background는 background-color, background-image, origin, size, repeat 등 모든 background와 관련된 프로퍼티를 설정할 수 있는 프로퍼티입니다. background에 url로 background 이미지를 설정했다면, 아래 사진처럼 여러 번 반복됩니다. 이때의 background의 역할은 background-image인 것이죠. 참고로 아래 ..
HTML 시맨틱 태그의 모든 것 Semantic Tag
HTML 시맨틱 태그의 모든 것 Semantic Tag
2022.11.27HTML 시맨틱 태그 뜻 시맨틱 태그 (Semantic tag)의 의미는 '의미를 가지고 있는 tag'를 의미합니다. Semantic을 네이버 영어 사전에 찾아봤을 때, Semantic은 '의미의, 의미론적인' 의미를 가지고 있으니, 시맨틱 태그는 의미가 있는 태그를 말합니다. 여기서 의미라는 것은 태그가 어떤 내용을 가지고 있는지 알려준다는 의미입니다. 검색이 중요한 시대에서 브라우저가 검색 내용을 찾을 때, 태그를 보고 내용이 중요한지 아닌지 구분할 수 있게 해주는 지표라고 생각하면 됩니다. 시맨틱 태그 종류 시맨틱 요소(elements) article aside details figcaption figure footer header main mark nav section summary 각 요소들은 ..
CSS 구글 폰트 적용 방법
CSS 구글 폰트 적용 방법
2022.11.17CSS에서 폰트를 바꾸고 싶을 때 google font를 사용할 수 있습니다. 이번 포스트에서는 구글 폰트에서 링크를 받고, HTML 파일에 적용하고, CSS 파일에서 폰트를 사용하는 방법을 다룹니다. 구글 폰트 적용하는 방법 구글 폰트를 적용하고 싶다면 구글 폰트 웹 사이트에 접속합니다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com Google Fonts 웹 사이트에 접속하고, 적용하고 싶은 fonts를 검색합니다. 사용하고 싶은 폰트 고르는 방법 저는 예시로 Signika Negative라는 폰트를 적용해보고자 합니다. ..
CSS 추가하는 3가지 방법
CSS 추가하는 3가지 방법
2022.11.13이번 포스트에서는 CSS를 추가하는 3가지 방법을 다룹니다. CSS를 추가하는 방법으로는 첫 번째, 인라인 스타일링(inline style), 두 번째 head 태그에 style 태그를 추가해서 넣는 방법, 세 번째로 CSS 파일을 만들어 연결해주는 방법이 있습니다. CSS 의미? CSS를 적용하기 전에 CSS의 의미를 먼저 보고 넘어가려고 합니다. CSS는 Cascading Style Sheets를 의미합니다. 여기서 Cascading은 네이버 영어 사전의 뜻으로 '1. 작은 폭포 2. 폭포처럼 흐르다 3. 풍성하게 늘어지다' 뜻을 가집니다. 즉, 여러 규칙이 같은 요소에 적용됨을 의미합니다. F12 크롬 개발자 도구 style 칸에서 casecading을 확인할 수 있는데요, 아래 캡처 사진처럼 하나..