Life of Jibro

웹사이트를 제작하다보면 숨김 속성을 가지도록 하고 싶은 것들이 존재하기 마련이다. 이 때 가장 먼저 떠오르는 속성은 바로 display: none이다. 하지만 visibility 속성도 있다는 사실을 알고 있는가? 필자는 종종 visibility 속성을 이용한 예제를 접하게 되는데, 아래의 참조자료가 바로 그 예시이다. 우선 아래의 예시에 대해 이야기를 하기 이전에 display와 visibility는 명확히 어떠한 차이가 존재하는지 살펴보고자 한다. [ display: none ] 우선 "display"는 블록 레벨과 인라인 요소 중 어느 쪽으로 처리할지와 함께, Grid, Flex 처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정하는 역할을 한다고 MDN이 알려주고 있다. 조금 더 자세히 보면, 형..

이번에 다루고자 하는 주제는 position. 그 중에서도 absolute에 대한 내용을 다루고자 한다. position의 absolute에 대해 이야기하기 전에 간단하게 static, relative 속성들에 대해서도 언급하고 넘어가보도록 하자 position: static position에는 static은 position의 default 속성으로 별도로 position 값을 주지 않는다면, 기본적으로 static 속성을 가지고 있게 된다. 여기서 static이 가진 특징은 html 문서에 작성한 요소의 순서(normal flow)에 따라 위치가 지정되게 된다. 글로만 보면 와닿지 않으니 예시를 통해 확인해보자! box1 box2 box3 body 요소 내의 순서대로 출력됨을 확인할 수 있다. posi..

© 이번 글에 대한 모든 저작권은 "빔캠프 CSS"(https://www.youtube.com/c/veamcamp)측에 있음을 알립니다. https://www.youtube.com/watch?v=7oOai_rOnuI&t=1s [요약 정리] img 요소는 inline 요소이기 때문에 baseline을 기준으로 배치된다. 따라서 img 요소 하단에 생기는 알 수 없는 빈 공간은 inline 요소의 baseline과 bottom 사이를 나타낸다. 그러므로 img 요소의 하단에 생기는 알 수 없는 빈 공간을 제거하기 위해서는 "vertical-align" 속성에 "top" 또는 "bottom" 값을 할당하여 제거할 수 있다.

선택자 우선순위에는 3가지 원칙이 있다. 1. 후자 우선의 원칙 2. 구체성의 원칙 (가중치에 따라 적용) 3. 중요성의 원칙 이 중 중요성의 원칙에서 살펴본 바에 의하면 "!important"를 사용한 경우, 가중치? 그런거는 깔끔하게 무시하고 먼저 style에 적용되는 특성을 가진다고 살펴본 바 있다. 물론 !important를 실제 프로젝트를 하며 사용하는 일이 별로 없기는 하지만 그냥 궁금한 관계로 !important에도 cascade가 적용되는지 살펴보도록 하자 아래와 같은 예제 코드를 가지고 살펴보자 hello world hello world hello world 여기서 잠깐 논외로 알고 넘어갈 부분이 있는데, 첫 번째는 "클래스의 작성 순서는 아무런 의미가 없다"는 것이고, 두 번째는 당연하..

앞서 살핀 Cascade의 의미 에 대하여 학습한 것을 통하여 우리는 CSS의 적용에도 우선 순위가 있음을 확인할 수 있었다. 마찬가지로 CSS 파일 안에서 사용되는 선택자들 역시 우선순위가 있다. 그 우선 순위를 결정하는데 있어 크게 3가지 원칙이 있다. 1. 후자 선택의 원칙 2. 구체성(명시도)의 원칙 3. 중요성의 원칙 위 3가지 원칙들에 대해 각각 살펴보자. [후자 선택의 원칙] 동일한 선택자가 연속으로 사용되었을 경우, 후자가 우선적으로 적용된다는 원칙이다. (다르게 말하면, 선택자에 가까운 스타일이 적용된다는 것) 다음 예제 코드를 통해 살펴보자 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui, dolor voluptatem in..

[기본 선택자] 1. 전체 선택자 : 모든 요소를 선택한다. 2. 유형 선택자 : 주어진 노드 이름을 가진 모든 요소를 선택한다. 3. 클래스 선택자 : 주어진 class 특성을 가진 모든 요소를 선택한다. 4. id 선택자 : id 특성에 따라 요소를 선택한다. 5. 특성 선택자 : 주어진 특성을 가진 모든 요소를 선택한다. [그룹 선택자] 1. 선택자 목록 : "," 는 선택자 그룹을 생성하는 방법으로 모든 일치하는 노드를 선택한다. [결합자] 1. 자손 결합자 : " " (공백)을 포함하는 결합자는 첫 번째 요소의 자손인 노드를 선택한다 ex) div span : 요소 안에 위치하는 모든 요소에 스타일 적용 2. 자식 결합자 : " > " 결합자는 첫 번째 요소의 바로 아래 자식인 노드를 선택한다...

아주 근원적인 질문을 해보자! 왜 h1 요소는 브라우저 상에 굵고 큰 글씨로 나타나는 것일까? 개발자 도구를 열어 h1 요소에 적용되는 스타일의 근원을 살펴보자! hello world!를 살펴보면 h1 요소에 적용된 스타일은 "사용자 에이전트 스타일시트"이다. 자! 그러면 "이 사용자 에이전트 스타일시트(User Agent Style Sheet)는 어디에서 온 것인가?"라는 질문으로 자연스럽게 이어지게 된다. 정답은 "웹 브라우저" 이다! 즉, 필자의 경우, 크롬에서 지정해준 기본 스타일이 적용된 것이다. 여기서 한 가지 유의할 점은 사용자가 속한 나라별로 사용자 스타일 시트는 달라질 수 있다는 점이다. 즉, 사용자의 국가에서 가장 보편적으로 사용되는 스타일 시트를 웹 브라우저가 자동으로 제공해준다는 점..

HTML 문서에 스타일을 적용하는 방법은 총 3가지가 있다. 1. Inline style 2. HTML 내부에서 css style 적용 3. HTML 외부에서 css style 적용 일반적으로 3번의 외부 style 적용이 가장 권고되는 적용사항이다. 하지만, 위의 경우들도 함께 살펴보자 [Inline style 적용 예] hello world [브라우저 출력 결과] - Inline style로 작성하게 되면 코드의 가독성이 크게 저하되기 때문에 권고되지 않습니다. [HTML 내부에서 style 적용 예] hello world [브라우저 출력 결과] - head 요소 안에 style 요소를 생성하여 그 안에 style 코드를 작성할 수 있습니다. [HTML 외부에서 style 적용 예] hello wor..

우리가 학습하고 있는 CSS는 "C"ascade "S"tyle "S"heet의 줄임말이다. 이 중 우리는 앞서 Cascade의 의미에 대해 살펴보자. Cascade 단어의 뜻 중 여기에서 쓰이는 의미는 "폭포가 되어 떨어지다"이다. 이 말의 뜻이 무엇인지 확인하기 위해서는 아래의 HTML 코드를 살펴보아야 한다. 아래 코드의 주석 내용을 확인하고, style sheet들의 선후 관계를 바꿔 가면서 실제로 브라우저 상에 어떠한 변화가 나타나는지 확인하길 바란다. I'm learning CSS!