New Love Park _ Coding_Story

CSS의 Position 기능을 이용하면 기존에 작성했던 HTML 코드 순서에 구애받지 않고 원하는 요소를 띄우거나 원하는 위치에 놓을 수 있다. 특히 absolute 속성을 사용하여 요소를 띄웠을 때 z-index를 활용하여 요소의 순서를 지정할 수 있다. 여러모로 도움이 되는 기능이다. 하지만 많은 요소들을 띄우려 absolute를 지정하고 z-index를 지정하게 되면 어느 순간 z-index가 작동하지 않는 기이한 현상이 발생할 때가 있다. 오늘은 z-index가 HTML에서 어떻게 작동하는지에 대해 알아보고자 한다. 1. z-index의 사용법 z-index는 HTML 요소에 가상의 z축 요소를 기준으로 순서를 지정할 수 있도록 도와준다. z-index는 position 속성이 지정되었을 때 사..

예전에 CSS의 Position 속성에 대해 알아본 적이 있다. 그 때 static, relative, absolute, fixed까지 설명했는데, sticky는 설명하지 않았다. 오늘은 sticky에 대해 알아보도록 하자. CSS 공부 일지 #06. CSS로 요소 움직이기! ㅡ position 속성에 대해 오늘은 CSS의 position 속성에 대해 알아보고자 한다. 예전에 position을 배웠을 때는 제대로 이해하지 못했는데, 이번 기회에 확실히 짚고 넘어가고자 한다. 1. Position 속성 position 속성은, HTML 요소를 new-love-park-cs.tistory.com 1. Sticky란? sticky는, Position 속성 중 하나로, static의 성질을 가짐과 동시에 fix..

오늘은 CSS의 transition 속성에 대해 알아보고자 한다. 웹 페이지를 둘러보면 마우스로 어떤 버튼을 갖다대기만 하였는데 슬라이드가 움직인다던가, 메뉴바가 내려온다던가 하는 것들이 있다. CSS의 transition으로 구현할 수 있다. 1. transition CSS transition은 CSS 속성을 변경할 때 애니메이션 속도를 조절한다. HTML의 요소가 움직이는 속도를, transition을 통해 조절할 수 있는 것이다. 예를 들어, 아래와 같은 코드가 있다고 가정하자. HELLO .box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 250px; height: 250p..

오늘은 CSS의 미디어 쿼리에 대해 알아보고자 한다. 반응형 웹 사이트를 만들기 위해서는 미디어 쿼리를 사용하는 것이 필수인데, 미디어 쿼리가 어떤 것인지 알아보고, 실제 CSS 코드를 통해 미디어 쿼리를 적용하는 법에 대해 알아보겠다. 1. 미디어 쿼리란? 미디어 쿼리는, 사용자가 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS가 작동할 수 있도록 도와주는 코드이다. 이는, 반응형 웹 제작에 필수적인 요소로써 컴퓨터 환경 뿐만이 아닌, 스마트폰, 태블릿 환경에서 웹 화면을 보는 현대에는 필수적인 요소가 되었다. CSS 코드에서, 화면 크기(width)가 550픽셀을 넘어가는 순간 그에 맞는 다른 CSS를 적용시킬 수 있다. 이렇듯 뷰포트에 따라 다른 CSS를 적용시킬 수 있는 것이 미디..

저번에 display 속성을 포스팅하면서 block과 inline 속성에 대해 공부했었다. 그리고 flex에 대해서는 언급하지 않았는데, 오늘은 flex에 대해 알아보고자 한다. flex 속성을 공부해보니 block과 inline 속성과는 다르게 조금 까다로운 부분이 있었지만 이를 잘 활용하면 position이나 float을 사용하지 않아도 사용자가 원하는 위치에 정렬할 수 있다는 장점이 있다. 오늘은 이 flex를 다루기 위한 방법을 알아보자. 1. flex란? flex는 레이아웃 배치 전용 기능으로 고안된 비교적 최신에 나온 CSS 기능이다. 요소 간 공간 배분과 강력한 정렬기능을 제공하는데, 행과 열을 기준으로 정렬이 이루어지기 때문에 1차원 레이아웃 모델을 지원한다. flex 요소를 사용하면 fl..

오늘은 CSS의 position 속성에 대해 알아보고자 한다. 예전에 position을 배웠을 때는 제대로 이해하지 못했는데, 이번 기회에 확실히 짚고 넘어가고자 한다. 1. Position 속성 position 속성은, HTML 요소를 어떻게 위치시킬지를 정의한다. position의 속성값으로는 static, relative, absolute, fixed, sticky가 있다. 해당 값들은 위치를 잡을 기준이 서로 다르다. 그에 따라 웹 브라우저에 출력되는 포지션이 다르게 나타난다. Position 속성을 사용하기 위해선 몇 가지 속성을 부가적으로 사용해야 한다. position 속성을 통해 어떤 기준으로 요소를 위치시킬지를 정했다면, 웹 브라우저에서 원하는 위치에 놓기 위해 좌표를 설정해야 한다. 좌..

CSS에서 float 속성을 활용하다가 레이아웃이 모두 무너진 적 있었을 것이다. 나도 초기에 CSS를 공부할 때 float 속성 때문에 많이 애먹었었다. 기껏 float 속성 작성하여 왼쪽으로 정렬시켜놓았더니 부모 요소에 있던 태그가 자기 멋대로 놀고 있고.. 요즘 공부를 하면서 느낀 것인데, 이러한 사소한 속성 하나하나에도 그 속성의 이름에 담긴 의미를 제대로 이해하면 사용하는데 도움이 많이 된다는 것을 느꼈다. float의 사전적 의미는 아래와 같다. 뭐가 뜻이 좀 있는 것 같은데, 명사는 제쳐두고 동사만 보자. '(물 위나 공중에서) 떠가다', '(가라앉지 않고 물에)뜨다'의 의미를 가지고 있다. float 속성 또한 이와 다르지 않다. 웹 페이지의 어떤 요소에 float 속성을 추가한다면, 그 ..

오늘은 CSS의 선택자(Selector)에 대해 알아보고자 한다. CSS에서 선택자는 어떤 HTML 태그를 꾸밀지를 선택하는 것으로, 여기에는 일반적인 HTML 태그가 올 수도 있으며, 클래스, 아이디, 그리고 부모 - 자식 관계를 나타내는 다양한 선택자들이 올 수 있다. 오늘은 선택자의 기본적인 활용방법과, 부모 ㅡ 자식 관계 등등 선택자에 관한 여러가지를 알아보도록 하겠다. 1. 선택자 기본 CSS 선택자를 활용하는 방법은 아래 코드와 같다. p { background-color: red; } 꾸밀 대상이 되는 HTML 요소만 입력해주고, 브라켓 사이에 속성과 값을 넣어주면 된다. 이것이 아주 가장 기본적인 CSS 코드 작성법이다. 저 선택자에 어떤 것을 입력하느냐에 따라 HTML 태그를 더욱 다양하..

오늘은 CSS의 Block과 Inline 속성에 대해 알아보고자 한다. Block과 Inline 속성은 CSS를 통해 웹 페이지의 레이아웃을 구성하는데 있어 필수적으로 알아야 하는 요소이다. 지난번 포스팅에서는 박스 모델에 대해서 배웠는데, 이러한 박스 모델이 웹 브라우저에서 어떤 위치에 어떻게 놓이느냐는, Block과 Inline으로 결정이 난다고 해도 과언이 아니다. 1. Display 속성 block과 inline에 대해 본격적으로 알아보기 전에 display 속성에 대해 알아보자. HTML의 태그에는 기본적으로 display 속성들이 모두 지정되어 있다. 이 속성은, HTML 태그들이 웹 브라우저에서 어떻게 보이는지를 결정하는데, 이 해당 속성의 값으로 block과 inline이 있는 것이다. d..

CSS를 사용하는 가장 큰 이유는, 웹 페이지의 예쁜 디자인이다. 그리고 예쁜 디자인 안에는 사용자들이 웹 페이지 화면을 한 눈에 사로잡을 페이지의 레이아웃 구성이다. 그리고 이를 위해 CSS는 기본적인 '박스 모델'이라는 개념을 사용하고 있다. CSS를 활용하여 레이아웃을 구성할 때 박스 모델의 개념을 이해하지 않으면 안된다. 그렇다면 박스 모델이란 무엇일까? 1. Box Model이란? 모든 HTML 요소는 예외없이, 상자(Box) 모양으로 구성된다. 이러한 구조를 박스 모델(Box Model)이라고 한다. 그리고 박스 모델을 구성하는 네 가지 요소들이 있다. 아래의 그림을 보자. 위 그림은, 크롬을 사용할 경우 개발자 도구(F12)를 사용한 적이 있다면, 한 번쯤 보았을 것이다. 위는 박스 모델을 ..