CSS 배우기4 CSS 쉽게 배우기 | Grid Layout (그리드 레이아웃) CSS 그리드 레이아웃 기초 알아보기 저번편에서 플렉스 박스에대해서 알아봤죠? 확실히 플렉스 박스를 사용하니까 반응형 디자인을 좀더 쉽고 빠르게 만들수 있습니다 그럼 그리드 레이아웃은 뭘까요? 플렉스 박스처럼 반응형 디자인을 만들때 사용하는 방법중 하나 입니다 그러면, 이 둘의 차이점은 뭘까요? 쉽게 말하자면 '차원' 입니다 플렉스 박스는 1차원적이고 그리드 레이아웃은 2차원적이라고 볼수 있겠습니다 플렉스 박스에서는 컨테이너의 반응 방향을 한 방향으로만 (가로 또는 세로) 설정할수있지만 그리드 레이아웃에서는 컨테이너의 반응 방향을 두 방향으로 (가로, 세로) 각각 따로 설정할수 있습니다 또다른 차이점은 디자인의 적용입니다 플렉스 박스의경우 대부분의 반응형 디자인이 컨테이너 요소에 적용되지만 그리드 레이아.. 2021. 3. 28. CSS 쉽게 배우기 | 패딩(padding)/마진(margin)/박스 모델(box model) CSS 패딩과 마진 차이점과 사용법 그리고 박스 모델 알아보기 안녕하세요 CSS 단위들을 보기전에 먼저 패딩과 마진, 그리고 박스 모델을 먼저 알아볼게요 HTML의 모든 요소에는 패딩과 마진을 조절할수 있습니다 패딩/마진을 사용해서 요소와 요소 사이의 간격을 조절하는거죠 박스 모델은 요소의 스타일이 어디에 적용되는지 볼수있는 지도 비슷한 도구 입니다 그럼 패딩/마진을 살펴볼게요 CSS 패딩(padding) 패딩은 요소의 테두리 안쪽 가장자리입니다 패딩의 사이즈를 조절해서 요소의 내용과 테두리사이의 간격을 벌리거나 좁힐수 있습니다 패딩은 색을 줄수 없으며 테두리가 없는상태에서는 구별할수 없습니다 패딩을 확인하려면 브라우저의 개발자 도구에서 박스 모델로 확인할수 있습니다 패딩은 위, 아래, 오른쪽, 왼쪽을 .. 2021. 1. 10. CSS 쉽게 배우기 | CSS 선택자(Selector) CSS로 HTML요소 선택하는 방법 안녕하세요 이번 편에서는 CSS 선택자 (selector)를 알아볼게요 CSS 선택자는 HTML 요소를 선택하는 방법입니다 HTML 요소를 선택하는 방법인 요소 이름으로 선택하기 요소의 클래스/아이디로 선택하기 요소와 요소의 관계로 선택하기 들을 알아볼게요 CSS 선택자가 중요한 이유는, 선택자를 사용해서 내가 원하는 요소만 스타일링할 수 있기 때문입니다 선택자를 알아보기 전에 CSS를 작성하는 것 먼저 알아볼게요 CSS 작성하는 방법 CSS를 작성하는 방법은 아주 간단합니다 먼저 내가 스타일링하고 싶은 요소를 쓰고 대괄호{ }를 열어주면 됩니다 예를 들어서 요소를 스타일 하고 싶으면 p {} 이렇게 p를 쓰고 대괄호를 열어줍니다 이렇게 하면 대괄호 안에 지정한 스타일.. 2021. 1. 4. CSS 쉽게 배우기 | 소개 CSS 소개, 뜻, 그리고 사용 방법 알아보기 안녕하세요 오늘부터 CSS (Cascading Style Sheet)를 알아볼게요 그럼 먼저 CSS가 뭘까요? CSS는 Cascading Style Sheet의 약자로 HTML를 예쁘게 꾸밀수있게 도와주는 웹 스타일링 언어 입니다 HTML이 민낯이라면 CSS는 민낯에 화장을 하는거라고 생각하면 됩니다 좀더 자세하게 풀어보자면 C - Cascading(카스케이딩) 카스케이딩의 사전적 의미는 '아래로 흘러가다' 입니다 S - Style(스타일) 디자인측면에서의 스타일을 말합니다 S - Sheet(시트) 문서를 말합니다 이렇게 '아래로 흘러가는 디자인 스타일 문서' 라고 풀수 있습니다? 뭔 개소리인가 싶죠? CSS의 특성상 제일 마지막에 작성된 스타일이 HTML요.. 2020. 12. 29. 이전 1 다음 반응형
