전체 글 (137) 썸네일형 리스트형 화면 구성하기 - grid 2차원 표현을 위한 layout, Gridgrid는 컨테이너의 방향을 지정하는 flex와 비슷하지만, 격자형식의 모델을 지원한다는 점에서 차이가 있습니다. display: gridgrid 모델은 행과 열을 기준으로 정렬하는 격자형 배치방법입니다.flex와 마찬가지로 부모가 되는 컨테이너, 자식이 되는 셀로, 셀 내부 아이템으로 구성되어있으며,축을 기준으로 하는 flex와 달리 행을 뜻하는 row, 열을 뜻하는 flex, 아이템 간 간격인 gutters로 구성되어있습니다. column row col 1 col 2 .. 화면 구성하기 - flex direction과 다양한 정렬방법 이전에는 flexbox 와 구성요소에 대해서 알아보았습니다.이제 그 구성요소들을 어떻게 다루는지에 대해 알아보도록 하겠습니다. 주축의 방향을 지정해주는 flex-directionflex-direction 속성은 주축의 방향을 지정해주는 옵션입니다.주 축을 가로로 설정하려면 row, 세로로 설정하려면 column으로 설정합니다. 예시 코드 default item1 item2 item3 row item1 item2 item3 co.. 화면 구성하기 - FlexBox 모델 화면 정렬, float, 그리고 flex와 grid화면을 만들려면 컨테이너의 배치 방법을 알아야 합니다.그중 기본적으로 수행하는것이 바로 컨테이너의 수직, 수평정렬입니다. 예전에는 inline 또는 float를 사용하여 정렬을 수행하였습니다.하지만, inline 같은 경우는 margin이 존재하지 않더라도 여백이 생기게 되고, float의 경우 다른 컨테이너 구조에 영향을 주게 됩니다. 이러한 문제점을 해결하기 위해 최근에는 flexbox 나 grid를 활용하여 정렬을 하고 있습니다.이번 글에서는 flexbox에 대한 개념을 정리해보겠습니다. display : flex flexbox 모델은 주축을 기준으로 컨테이너를 정렬하는 선형적 배치방법입니다.부모가 되는 컨테이너, 자식의 역할을 하는 아이템,진.. css 알아보기 - 선택자 : 선택자 중첩 선택자 중첩이전까지 소개했던 선택자 여러개를 같이 사용하는 것을 선택자 중첩이라고 합니다.예시 코드에서 일부 보여드리기도 했었지만, 여기서 다시한번 작성해보겠습니다. 선택자 중첩 사용사용방법은 간단합니다.법칙에 맞게 그대로 사용하면 되기 때문입니다. 타입/전체선택자 [속성선택자] :가상클래스 ::가상요소 순으로 적으면 됩니다. 예를 들면 a[target="_blank"]:hover::after 나,#item:not(li)::selection 처럼 사용합니다. 예시 코드 a[target="_blank"]:hover::after는 아래와 같습니다. naver #item:not(li)::selection는 아래와 같습니다. .. css 알아보기 - 선택자 : 가상요소 선택자 선택자의 종류1. 전체 선택자2. 타입 선택자3. 속성 선택자4. 가상 클래스 선택자5. 가상 요소 선택자 선택한 영역의 앞 또는 뒤, 첫번째 글자, 첫번째 줄 등선택한 영역의 특정 부분에 스타일을 적용하는 선택자를가상요소 선택자 라고 합니다. 가상요소 선택자는 ::가상요소 나 :가상요소 의 형식으로 사용합니다. 가상 요소와 가상 클래스의 차이가상 요소는 선택한 영역의 특정 요소를 대상으로 하는 선택자이고,가상 클래스는 선택한 영역의 특정 상태를 대상으로 하는 선택자입니다. 태그의 앞과 뒤 ::after 와 ::before특정 태그의 앞에 가상요소를 만들때는 before 태그를,특정 태그의 뒤에 가상요소를 만들때는 after 태그를 사용합니다.또한 content 속성을 사용하여 가상의 공.. css 알아보기 - 선택자 : 가상클래스 선택자 선택자의 종류1. 전체 선택자2. 타입 선택자3. 속성 선택자4. 가상 클래스 선택자5. 가상 요소 선택자 가상 클래스 선택자가상 클래스 선택자란, 태그 뒤에 추가적인 조건을 붙이고,해당 조건을 만족하는 대상에 대한 선택자입니다.:가상이벤트 로 가상 클래스 선택자를 지정할 수 있습니다. 가상 이벤트의 종류1. 동적 가상이벤트사용자의 동작에 따라 스타일링을 적용해주는 선택자입니다.link & visited하이퍼링크에 적용할 수 있는 선택자입니다.한번도 누르지 않았을 경우 :link 가상클래스 선택자로,한번이라도 눌렀을 경우 :visited 가상클래스 선택자가 적용됩니다.hover & active & focus마우스와 상호작용하는 선택자입니다.마우스를 올리면 hover 선택자가,태그를 누르는 동안 .. css 알아보기 - 선택자 : 속성과 속성선택자 선택자의 종류1. 전체 선택자2. 타입 선택자3. 속성 선택자4. 가상 클래스 선택자5. 가상 요소 선택자 속성선택자란, 속성을 가진 태그를 대상으로 스타일을 적용하는 선택자입니다.우선 속성에 대해 알아보겠습니다. HTML 속성이란?속성이란, html 요소의 옵션이라고 볼 수 있습니다.속성을 사용하여 태그를 제어할 수 있습니다. 의 형태로 구성되어있습니다.class와 id 또한 속성의 일종입니다. 속성 선택자속성 선택자는1. 속성을 가진 경우2. 태그를 가진경우3. 속성과 값을 가진 경우세가지를 대상으로 구성할 수 있으며,태그 [속성 = 값] 의 형태로 구성됩니다. 아래는 1번과 2번 경우에 대한 예시입니다. 예시 코드를 보면target 이라는 속성을 가진 태그들은( [target] ) 모두 검.. css 알아보기 - 선택자 : 전체선택자 * 와 타입선택자, class와 id 선택자란, 스타일을 적용하려는 HTML 요소를 고르기 위한 방법입니다. 선택자의 종류1. 전체 선택자2. 타입 선택자3. 속성 선택자4. 가상 클래스 선택자5. 가상 요소 선택자 전체 선택자 *전체 선택자 ( * ) 는 모든 html 태그에 적용되는 선택자입니다.해당 선택자 내의 선언 블록들은 모든 html 태그에 적용됩니다. 따라서 전체 선택자는 html 태그의 기본 스타일을 지정해주는데 사용하며,다른 css를 덮어쓰지 않기 위해 가장 맨 위에 작성합니다. 타입 선택자태그의 타입을 대상으로 하는 선택자입니다.태그 선택자 라고도 합니다.대표적으로 클래스 선택자와 id 선택자가 존재합니다. class 와 id둘 다 html 태그를 지정하는데 사용하는 속성입니다.차이점이라면, class는.. 이전 1 2 3 4 5 6 ··· 18 다음
