728x90 Frontend/HTML, CSS16 [HTML, CSS] CSS 색상 설정하기 이번 글에서는 CSS에서 색상을 설정하는 방법들에 대해서 설명하겠습니다. 색상을 지정하는 방식에 따라서 약 5가지 방법으로 구분할 수 있습니다. ① 16진수 - #RRGGBBRGB 색 모형에서 빨간색, 초록색, 파란색의 값을 각각 16진수로 표현하는 방법입니다. 모든 값들은 16진수이기 때문에 00과 FF 사이의 값이어야 합니다. #hexcolor1 { color: #ff0000; } /* red */#hexcolor2 { color: #00ff00; } /* green */#hexcolor3 { color: #0000ff; } /* blue */※ 16진수를 활용할 때, #RRGGBB 다음에 두 자릿수를 덧붙여서 알파 값을 넣어서 투명도를 지정할 수 있습니다.#hexcolor1_transparent {.. 2023. 6. 1. [HTML, CSS] display 속성 CSS에서 display 속성은 HTML 요소가 화면에서 어떻게 표시되는지를 정의하는 속성입니다. HTML의 모든 요소는 display 속성에 디폴트값을 가지고 있는데, 다른 값을 가지도록 지정할 수도 있습니다. display 속성에 가장 자주 사용되는 4가지 값 inline, block, inline-block, none을 알아보도록 하겠습니다. ① display: inline;display 속성이 inline으로 지정된 요소는 줄바꿈 없이 다른 요소들과 같은 줄에 배치됩니다. inline 요소의 크기는 내용의 크기만큼이기 때문에 width와 height과 같은 속성은 반영되지 않습니다. margin과 padding은 좌우로는 반영되지만, 같은 줄에 배치되기 때문에 상하로는 반영되지 않습니다. (, .. 2023. 5. 31. [HTML, CSS] 그리드(Grid) 레이아웃 - 아이템 편 그리드(Grid) 레이아웃은 행과 열을 지원하는 격자식 구조입니다. 이번 글에서는 그리드 레이아웃에서 그리드 아이템에 대해서 설명하겠습니다. 플렉스 구조와 플렉스 컨테이너에 대한 이야기는 다음 글을 참고하시길 바랍니다. [HTML, CSS] 그리드(Grid) 레이아웃 - 컨테이너 편그리드(Grid) 레이아웃은 행과 열을 지원하는 격자식 구조입니다. 2차원 상에서 요소들을 배치하기가 직관적이기 때문에 웹페이지를 디자인하는 것이 쉽다는 장점이 있습니다. 1차원 상에서 요소hyeok1235.tistory.com 그리드 레이아웃에서 한 칸을 의미하는 그리드 셀은 그리드 라인이라는 가상의 선으로 구분됩니다. 그리드 셀은 그리드 아이템을 담을 수 있는 하나의 틀과 같은 역할을 합니다. 그리드 라인에서 가로선과 세로.. 2023. 5. 9. [HTML, CSS] 그리드(Grid) 레이아웃 - 컨테이너 편 그리드(Grid) 레이아웃은 행과 열을 지원하는 격자식 구조입니다. 2차원 상에서 요소들을 배치하기가 직관적이기 때문에 웹페이지를 디자인하는 것이 쉽다는 장점이 있습니다. 1차원 상에서 요소들을 배치하는 플렉스 레이아웃에 대해서는 각각 컨테이너 편과 아이템 편으로 나누어서 설명했으니 참고하시길 바랍니다.→ [HTML, CSS] 플렉스(Flex) 레이아웃 - 컨테이너 편→ [HTML, CSS] 플렉스(Flex) 레이아웃 - 아이템 편 그리드 레이아웃을 시작하는 방법은 가장 먼저 display 속성을 grid 또는 inline-grid로 설정해줘야 합니다..container { display: grid; /* display: inline-grid; */} 그리드 레이아웃은 플렉스 레이아웃과 마찬가지로 .. 2023. 5. 7. [HTML, CSS] 플렉스(Flex) 레이아웃 - 아이템 편 Flexbox, Flexible Box로도 불리는 플렉스(Flex)는 이름 그대로 더 유연한(Flexible)한 반응형 디자인을 지원합니다. 이번 글에서는 플렉스 구조에서 플렉스 아이템에 대해서 설명하겠습니다.플렉스 구조와 플렉스 컨테이너에 대한 이야기는 다음 글을 참고하시길 바랍니다. [HTML, CSS] 플렉스(Flex) 레이아웃 - 컨테이너Flexbox, Flexible Box로도 불리는 플렉스(Flex)는 이름 그대로 더 유연한(Flexible)한 반응형 디자인을 지원한다. 여러 요소들이 있으면 1차원에 한해서 요소들의 방향, 크기, 정렬과 같은 다양한 속성들hyeok1235.tistory.com 플렉스 아이템은 ① order, ② flex-basis, ③ flex-shrink, ④ flex-g.. 2023. 2. 9. [HTML, CSS] 플렉스(Flex) 레이아웃 - 컨테이너 편 Flexbox, Flexible Box로도 불리는 플렉스(Flex)는 이름 그대로 더 유연한(Flexible)한 반응형 디자인을 지원합니다.여러 요소들이 있으면 1차원에 한해서 요소들의 방향, 크기, 정렬과 같은 다양한 속성들을 쉽게 설정할 수 있습니다.플렉스의 기본 구조플렉스를 사용하기 위해서는 먼저 부모 요소인 플렉스 컨테이너(Flex Container)를 정의해야 한다. 정의하는 방법은 display 속성을 flex로 설정하는 것입니다. 플렉스 컨테이너 내부에 있는 자식 요소들은 자동으로 플렉스 아이템(Flex Item)이 되어 플렉스 컨테이너를 배경으로 가집니다.아래 예시에서 회색 배경은은 플렉스 컨테이너, 빨간 상자들은 플렉스 아이템입니다. 1 2 3 4 5 6" data-ke-ty.. 2023. 1. 7. 이전 1 2 3 다음 반응형
