Coding Diary.

1. 그리드 나누기display 속성을 grid로 하고 grid-template-columns 속성으로 열을, grid-template-rows 속성으로 행을 나눌 수 있습니다. 예를 들어거 3x2 그리드를 만드는데, 열 너비는 각각 100px, 200px, 100px이고 행 너비는 150px, 200px이라면 아래와 같이 쓸 수 있습니다.display: grid;grid-template-columns: 100px 200px 100px;grid-template-rows: 150px 200px; 2. 유연한 크기 단위fr 이라는 단위를 사용하면 플렉스박스처럼 전체 크기에 대해 상대적인 값을 지정할 수 있습니다. 예를 들어서 3x2 그리드에서 열의 너비를 1:1:1로 하고 싶다면 아래와 같이 하면 됩니다.d..

1. 플렉스박스 만들기 display: flex; 2. 기본 축과 교차 축 3. 배치 방향 flex-direction 을 사용하면 기본 축의 방향을 정할 수 있습니다. 이때 기본 값은 row 입니다. 4. 기본 축 정렬 : justify-content justify-content를 사용하면 기본 축 방향으로 정렬할 수 있습니다. 기본 값은 flex-start 입니다. 5. 교차 축 정렬 : align-items 교차 축 방향으로 정렬할 때는 align-items를 사용합니다. 기본 값은 stretch(늘려서 배치하기) 입니다. 6. 요소가 넘칠 때 : flex-wrap 요소가 넘치는 경우 flex-wrap: wrap 을 지정해주면 교차 축 방향으로 넘어가서 배치됩니다. 7. 간격 : gap 숫자를 하나 ..

1. Position 속성 글의 흐름에서 벗어나서 요소들을 자유롭게 배치할 때 쓰는 속성입니다. position에 따라서 위치를 정하는 기준이 달라집니다. 기본 값은 static이고 static인 경우 원래 있어야 할 위치에 배치됩니다. 2. 위치 정하기 위치를 정하는 기준에 대해서 top, right, bottom, left 속성으로 위치를 정할 수 있습니다. 값이 모두 똑같은 경우 inset 속성을 씁니다. 3. relative 포지션 요소의 원래 위치를 기준으로 배치합니다. 이때 요소의 원래 자리는 그대로 차지하고 있습니다. .green { position: relative; top: 15px; left: 10px; } 4. absolute 포지션 가장 가까운 포지셔닝이 된 조상 요소를 기준으로 배..

1. 순서 리스트(Ordered List) 항목들 사이에 순서가 있는 목록을 작성할 때 이라는 태그를 감싸고, 그 안에 항목은 태그를 씁니다. 상영작 순위 라라랜드 명량 극한직업 국제시장 어벤져스: 엔드게임 2. 순서 없는 리스트 (Unordered List) 항목들 사이세 순서가 없는 목록을 작성할 때 이라는 태그를 감싸고, 그 안에 항목은 태그를 씁니다. 상영작 순위 라라랜드 명량 극한직업 국제시장 어벤져스: 엔드게임 3. 리스트 스타일링 순서 리스트에서는 type 속성으로 기호를 바꿀 수 있습니다. 라라랜드 명량 극한직업 국제시장 어벤져스: 엔드게임 list-style 이라는 CSS 속성으로도 바꿀 수 있습니다. ul { list-style: disc; /*동그라미 */ } 기호를 없애고 싶을 때는..

앞에서 학습한 텍스트 관련 CSS 속성이외의 텍스트 스타일링에 대해 알아보겠습니다. 1. 줄 높이 line-height 줄과 줄 사이의 간격을 조절할 때 CSS 에서는 줄의 높이로 조절합니다. 줄 높이의 값인 line-height 는 단위 없이 쓰는 글자 크기에 상대적인 값입니다. 예를 들어서 font-size 가 16px 이라면 line-height: 1 은 16px*1=16px이 되고, line-height: 1.5는 16px*1.5=24px이 됩니다. 넓게 넓게 넓게 보통 보통 보통 좁게 좁게 좁게 .loose { font-size: 16px; line-height: 1.7; /* 16px * 1.7 = 27.2px */ } .regular { font-size: 16px; line-height: ..

CSS의 기본개념을 정리해보겠습니다. 1. CSS 규칙 선택자 { 속성: 속성값; 속성: 속성값; } 2. CSS 선택자 규칙에서 요소를 선택하는 데 사용하는 부분입니다. 1) 태그 이름 h1, div 같은 걸 쓰면 그 태그에 해당하는 요소들에 모두 스타일을 적용합니다. 예를 들어서 모든 h3 태그의 글자 크기를 24px로 하려면 아래와 같이 씁니다. h3 { font-size: 24px; } 2) 아이디(id) 맨 앞에 샵을 붙여서 #아이디_이름 과 같은 문법으로 씁니다. 참고로 아이디는 한 페이지 안에서 중복으로 쓰면 안됩니다. 예를 들어서 아이디 이름이 hallasan 인 태그에 글자색을 넣으려면 아래와 같이 씁니다. 우도 한라산 국립공원 성산 일출봉 군산 오름 #hallasan { color: #..

이번 시간에는 글자색을 한번에 바꾸는 방법을 알아보겠습니다. 1. 글자색 한번에 바꾸기 h3 태그가 여러개이고 각각의 글자색이 다 같다면 한번에 글자색을 바꿀 수 있습니다. 규칙을 정해주면 되는데 위와 같이 head 태그 안에 일명 관심사의 분리를 시켜주는 것입니다. 이런 식으로 관심사의 분리를 시켜주면 한번에 색상을 변경하기도 편하고 HTML 과 CSS 를 따로 저장하기 편합니다. 만약, h3중 하나만 색상을 변경해야 한다면 어떻게 할까요? id를 넣어주면 됩니다. 예를 들어, 한라산 국립공원만 다른 색을 넣는다고 가정해봅시다. 우도 한라산 국립공원 성산 일출봉 군산 오름 위와 같이 id를 주고 style태그에 #hallasan 에 색상을 넣어주면 한라산 국립공원만 색상이 바뀌는 것을 볼 수 있습니다...

저번 시간에는 글 정렬하는 방법을 알아보았습니다. 이번 시간에는 이미지와 본문의 크기, 여백을조절하는 방법을 알아보겠습니다. 1. 이미지와 본문 크기 조절하기 이미지의 너비를 조절하는 CSS 속성은 width, 높이를 조절하는 속성은 height 입니다. 따라서 이미지의 크기를 너비 700px, 높이 375px 조절하는 코드는 입니다. 하지만 이미지의 크기를 정해버리면 화면의 크기에 따라 이미지가 꽉 차지 않을 수 있습니다. 따라서 화면의 크기에 따라 이미지가 꽉 차게 하려면 너비에 700px 대신 100%, 높이 값을 지워주면 비율을 유지하면서 이미지가 화면에 따라 커지고 작아지는 것을 볼 수 있습니다. 본문 크기를 조절하는 방법도 영역 태그인 태그에 픽셀 값을 넣어주면 됩니다. 2. 여백 조절하기 글..

저번 시간에는 글꼴 변경하는 방법을 알아보았습니다. 이번 시간에는 글 정렬하는 법을 알아보겠습니다. 1. 글 정렬하기 기본적으로 웹페이지는 좌측 정렬이 되어있습니다. 글을 정렬하는 CSS 속성은 text-align 입니다. 따라서 h1태그에 중앙정렬을 하는 방법은 이라고 입력하면 됩니다. 이런 식으로 태그마다 넣어도 되고 전체 영역에 넣어도 됩니다. 전체 영역에 중앙정렬을 하는 코드는 입니다. 전체 영역에 넣으면 덜 번거로울 것 같습니다. 오른쪽 정렬을 하는 것은 center 대신 right, 좌측 정렬을 left로 입력하면 됩니다. 태그에는 중앙 정렬을, 후기가 들어있는 태그에는 좌측정렬을 적용하면 다음과 같습니다. 1 2 3 7 8 9 Weekly Codeit 10 금요일에 만나는 코딩 한 스푼 11..

저번 시간에는 글꼴을 변경하는 방법을 알아보았습니다. 이번 시간에는 글자 크기와 굵기를 변경하는 방법을 알아보겠습니다. 1. 글자 크기와 굵기 변경하기 글자 크기를 변경하는 CSS 속성은 font-size 입니다. 예를 들어, h2에 해당하는 글자의 크기를 20px로 바꾸는 코드는 입니다. 또한, 글자의 굵기를 변경하는 CSS 속성은 font-weight 입니다. 예를 들어, h1에 해당하는 글자의 굵기를 300으로 설정하는 코드는 입니다. 코드잇이 엄선한 (크기 24px, 굵기 300) 프로그래밍 꿀팁 (크기 32px, 굵기 700) 배움의 기쁨을 세상 모두에게 (크기 24px, 굵기 300) 많은 코둥이들이 구독하고 있어요! (크기 32px, 굵기 700) 위의 글자 크기와 굵기를 적용하면 아래와 같..