깡뇽

보호되어 있는 글입니다.

- 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; -..

CSS(Cascading Style Sheets): 웹 페이지에서 HTML을 꾸미기 위해 사용하는 언어 - 인라인 스타일: CSS를 HTML 코드 안에 직접적으로 적는 방식. 꾸미고자 하는 HTML요소의 여는 태그에 style속성을 적어주는 것. ex) style속성 안에 색, 폰트 크기 등 원하는 스타일을 적고 마지막에 필수로 ;(세미콜론)을 붙여준다. We can make webpage. - 스타일 태그: 태그를 사용하여 HTML 파일 안에서 CSS 코드를 사용할 수 있는 방식. - CSS 파일: HTML과 CSS 코드를 각각의 파일로 분리하는 방식. CSS 파일은 .CSS 확장자 명으로 만들 수 있음. ex) webstyle.css ★방법) CSS 파일을 사용하려면 HTML 파일과 연결해주어야한다...

- 의미론적 HTML(Semantic HTML): 기존 HTML구조(Non-semantic HTML)보다 접근성이 좋고, 검색 엔지 최적화를 향상하며, 쉽게 이해할 수 있기에 사용하는 방식임. ⤷ Semantic HTML에 대한 이해를 도울 수 있는 글 www.internetingishard.com/html-and-css/semantic-html/ Semantic HTML | HTML & CSS Is Hard A friendly tutorial for developing meaningful web pages www.internetingishard.com ① 헤더와 내비게이션: 는 주로 내비게이션 링크 또는 같은 제목들을 포함하고, 는 메뉴와 같은 내비게이션 링크들을 위해 사용됨. ex) 가 를 포함하고 ..