깡뇽

그리드(Grid)란? CSS Grid를 사용하여 전체 웹 페이지를 배치할 수 있다. Flexbox는 주로 1차원 레이아웃에 항목을 배치하는 데 유용하고, CSS 그리드는 2차원 레이아웃에 가장 유용하며 행과 열 모두에서 요소를 정렬하고 이동하는 데 사용할 수 있는 많은 도구를 제공한다. Grid 생성 그리드를 설정하려면 grid container와 grid items가 있어야 한다. 그리드 컨테이너는 그리드 항목을 자식으로 포함하고 전체적인 스타일과 위치를 적용하는 부모 요소이다. HTML 요소를 그리드 컨테이너로 전환하려면, 요소의 display속성을 grid(블록 수준 그리드의 경우) 또는 inline-grid(인라인 그리드의 경우)로 설정해야한다. 그런 다음 다른 속성을 할당해서 그리드를 배치해야 ..

☆ 색상 바퀴 or 색상환(The Color Wheel) 기본 색상은 빨간색, 파란색, 노란색으로 구성. 2차 색상은 녹색, 주황색, 자주색처럼 두 가지 기본 색상을 혼합해 생성. 3차 및 최종 색상은 기본과 보조 색상을 혼합해 생성. → 이름이 2개의 단어로 이루어짐. ex) 3차 및 최종 색상 • Red-orange (Vermillion) • Yellow-orange (Amber) • Yellow-green (Chartreuse) • Blue-green (Teal) • Blue-purple (Violet) • Red-purple (Magenta) - 색상환과 HSLA 16진수 코드와 RGB 값은 직관적으로 조정하기 어렵다. (색이 조금 더 밝아야 한다거나,, 등의 경우에서 표현이 힘듦) HSLA는 C..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

- Box(상자) 모델 : 웹 페이지에서 공간을 차지하는 요소의 일부를 정의하는 속성 집합 -> 콘텐츠 영역의 크기(너비 및 높이) & 패딩 & 테두리 & 여백 ① 높이와 너비 : height와 width 속성을 사용하여 크기를 수정할 수 있다. ex) px 즉, 픽셀을 사용하면 요소 상자의 정확한 크기를 설정할 수 있다. -> 모든 기기에서 동일한 크기 p { height: 30px; width: 120px; } ② 테두리 : 프레임과 같이 요소를 둘러싸는 선, 테두리는 border 속성을 사용하여 설정할 수 있다. ▷ 설정1) width : 테두리의 두께. thin, medium, thick 중에 선택 가능. ▷ 설정2) style : 테두리의 디자인. none, dotted, solid와 같은 10..

① 이미지 둥글게 바꾸기 ex) border-radius를 50%로 하면 원이 된다. 50%보다 작게하면 사각형에서 모서리가 조금 둥글게 된다. img { height: 150px; margin: 0 auto; border-radius: 50%; } ② 위치 바꾸기 : position을 이용해서 위치를 바꾸줄 수 있다. ex) id가 box인 녀석을 position: absolute를 하여 절대적으로 윗공간이 7px가 되는 위치에 배치시켰다. #box { position: absolute; top: 7px; } ⤷ 더 많은 위치 변경 정보를 배울 수 있는 사이트 developer.mozilla.org/en-US/docs/Web/CSS/position position - CS..

- 글꼴 특징 스타일 시트에 지정된 글꼴이 사용자의 컴퓨터에 설치되어 있어야 한다. 서체를 지정하지 않으면 "Times New Roman"이 기본으로 적용된다. 서체의 이름이 둘 이상의 단어로 구성되는 경우 큰 따옴표로 묶어야 한다. - 글꼴 두께 font-weight : 텍스트를 굵게 지정할 수 있다. 숫자로 지정할 경우 100부터 900 사이 숫자 사용. ex①) font-weight: bold; -> 굵게 / font-weight: normal; -> 보통 ex②) font-weight: 400; -> 기본 굵기 / font-weight: 700; -> 굵게 / font-weight: 300; -> 얇게 - 글꼴 font-style : 텍스트를 이탤릭체로 바꿀 수 있다. ex) font-style:..

☆ CSS에서 색상을 표현하는 방법 ① 색상 이름(Named colors) : 색상을 묘사하는 영어 단어 ② RGB : 빨강, 초록, 파랑의 혼합을 표현하는 숫자 값 ③ HSL : 색조, 채도, 밝기의 혼합을 표현하는 숫자 값 - 전경 vs 배경 color : 전경색 변경 background-color : 배경색 변경 - 16진수 ex) color: #000000; 색상표 참고 사이트 developer.mozilla.org/en-US/docs/Web/CSS/color_value - CSS: Cascading Style Sheets | MDN The data type is specified using one of the options listed below. Note: Although values are ..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

Visual Studio Code에서 HTML 파일 만들기 STEP1) Visual Studio Code를 다운로드한다. (나는 예전에 다운로드하았었기 때문에 다시 다운로드하지 않았다.) STEP2) 상단의 메뉴바에 "File"을 선택하고, "Open Folder..."를 클릭한다. STEP3) 원하는 폴더를 고른 후에 "폴더 선택"을 클릭한다. STEP4) 왼쪽에 EXPLORER 아래에 선택했던 폴더가 있을 것이다. 마우스를 올려보면 아이콘이 뜨고, "New Folder"를 클릭한 후 폴더를 하나 더 만들어 준다. STEP5) 그대로 STEP4처럼 마우스를 올리고 아이콘이 뜨면 "New File"을 클릭한 후에 파일명을 "이름.html"이라고 짓는다. html이라고 치면 나오는 "html:5"를 엔터 ..

- CSS 구조 : CSS선택기의 내부에는 CSS선언을 써야 함. ☆ 속성 : 요소의 꾸미고자 하는 속성 (예: 크기 size, 색상 color 등) ☆ 값 : 속성의 값 (예: 18px, blue 등) 선언에서 속성과 값은 콜론( : )으로 구분되고, 선언의 끝에는 세미콜론( ; )이 사용된다. - 폰트(Font Family) : font-family 속성을 사용함. ex) font-family: Arial; / font-family: "Courier New"; -> 서체에 띄어쓰기가 있다면 따옴표( " )를 사용한다. 로딩 속도를 위해서는 웹 페이지에 2-3개의 서체만 사용하는 것이 좋다. - 폰트 크기(Font Size) : font-size 속성을 사용함. ex) font-size: 18px; -..