사이먼's 코딩노트

[box-sizing] box-sizing은 도형의 테두리(border)를 안에 그릴지 밖에 그릴지를 정하는 속성이다. box-sizing의 기본 속성은 content-box로 도형 밖에 그려진다. 디자인 상 outside 즉, 밖에 테두리를 그리는 속성은 box-sizing: content-box; 이다. 디자인 상 inside 즉, 안에 테두리를 그리는 속성은 box-sizing: border-box; 이다. 웹 디자이너는 한가지 가이드라인을 만들어서 통일성있게 디자인을 하는 것이 좋다. 구현하는 개발자는 구현하기 전에 한번씩 확인 후 개발을 하는 것이 좋다. 너비, 높이가 200px에 border의 두께를 1px를 준다고 가정했을 때, box-sizing: border-box;를 적용하면 박스(도형..

[문제풀이] 아래 문제는 모든 태그와 텍스트를 가운데 정렬해보고자 만든 문제입니다. 도형취급을 받는 display 속성과 텍스트취급을 받는 display 속성을 잘 구분해서 풀어봅시다. 여유가 된다면 우측 하단에 버튼도 추가해봅시다. See the Pen 문제 by kimhyeji324 (@kimhyeji324) on CodePen. [문제 도전] img는 텍스트 취급을 받는 display: inline 요소이다. 따라서 img를 감싸고 있는 엘리먼트에 가운데 정렬을 한다. img-box에 text-align: center;을 적용한다. 하단에 텍스트들은 도형취급을 받는 display: block 요소 안에 써져있다. (h1, p 태그) text-box에는 가운데 정렬을 위해 margin-left: au..

[도형 가로정렬] 상위 엘리먼트와 하위 엘리먼트의 크기가 같으면 정렬기능을 사용할 수 없다. 뚱뚱한 고양이가 박스에 끼어있을 때 사람이 박스를 아무리 흔들어도 움직이지 않는 것처럼 모든 물체나 요소도 똑같이 상위 엘리먼트 크기와 하위 엘리먼트의 크기가 같으면 정렬할 수 없다. (가로와 세로 전부) [브라우저에서 도형 취급을 받는 요소] display 속성이 block 요소일 때 display 속성이 flex 요소일 때 [브라우저에서 도형 취급을 받는 요소의 가로정렬] margin-left: auto; 와 margin-right: auto; 를 사용한다. 두 속성은 움직여야할 태그에 직접 적용해야한다. margin-left: auto; 의 속성을 부여하면 도형 취급받는 요소는 오른쪽으로 정렬하게 된다. m..

[a태그] a태그는 앵커 태그이자 하이퍼링크 태그이다. a태그는 URL 주소를 남겨 해당 웹 페이지로 링크되어 이동하는 역할을 가진 태그이다. a태그는 클릭할 수 있는 형태가 있어야 이동할 수 있다. 링크만 적어두고 태그의 내용이나 형태가 없다면 링크 이동이 불가능하다. a태그의 기본속성인 target="_self"는 링크 이동을 할 때, 내가 보고있는 페이지가 바뀌면서 이동한다. target의 속성을 _blank로 한다면 내가 보고있는 페이지가 아닌 새 페이지가 열리면서 이동한다. (target="_blank") a태그는 a태그가 가진 너비, 높이의 범위만큼 클릭이 가능하다. a태그의 기본 display 속성값은 inline이고 크기 커스텀을 위해서는 상황에 맞는 display 속성값으로 변경 후 커스..

[inline-block 줄바꿈 복습] [브라우저에서 텍스트 취급받는 display 속성값] inline inline-block 텍스트에 자간, 행간과 같은 여백이 있듯이 두 속성값도 여백이 생긴다. [브라우저에서 도형 취급받는 display 속성값] block flex See the Pen inline-block 줄바꿈 복습 by psm817 (@psm817) on CodePen. [inline-block 여백제거] [여백속성] margin : 클릭되지 않는 범위에 사용되는 여백 속성, 적용하면 적용한 태그 너비,높이에 포함되지 않는다. 오브젝트와 오브젝트 사이를 구분할 때 사용한다. (태그와 태그 사이의 여백) padding : 클릭되지 않는 범위, 클릭이 되야하는 범위에도 사용되는 여백 속성 (태그..

[h 태그] h 태그는 제목 태그이다. h 태그의 종류는 총 6개이며 h1, h2, h3, h4, h5, h6이다. h 태그의 숫자가 클수록 글자 크기가 조금씩 작아진다. (제목 용도에서 본문 용도의 글자로 작아진다.) h1 태그는 html 문서에서 딱 한번만 사용할 수 있다. h1 태그 없이는 h2 태그를 사용할 수 없다. h2 태그부터 h6 태그까지는 html 문서에서 여러번 사용할 수 있지만, h2 태그부터는 순서대로 한번씩 다 사용한 후 자유롭게 사용해야한다. h2 -> h3 -> h3 -> h3은 가능, h3 -> h3 -> h3 -> h2는 불가능 h 태그의 기본 display는 block이다. [overflow] 상위 엘리먼트보다 하위 엘리먼트가 더 클 때 overflow 속성을 사용하여 처..

[class와 id] 태그에 이름(별칭)에 지어 선택자로 활용할 수 있다. [class와 id의 차이점] 1. class는 같은 이름을 사용할 수 있다. 2. html에서 class 작성은 class=""와 같이, css에서는 .을 붙혀 선택자 속성을 작성한다. 3. id는 같은 이름을 여러번 사용할 수 없다. 4. html에서 id 작성은 id=""와 같이, css에서는 #을 붙혀 선택자 속성을 작성한다. [이름(별칭) 지을 때 주의사항] 영문부터 시작해야한다. 숫자만 사용할 수 없다. 누구나 구분질 수 있도록 간단하고 직시적인 이름을 짓는게 좋다. [이름 짓기 예시] 두 단어 이상일 때 -을 쓴다. (best-item) 뒷 단어에 대문자 활용이 가능하다. (best-Item) "~안에 있는 ~"로 표..

[엘리먼트] 엘리먼트는 열린태그, 닫힌태그를 모두 합쳐서 말하는 것이다. ex) html의 구조는 트리구조형식으로 가지치기하듯 아래로 뻗치는 형식이다. html 아래에는 head와 body로 나누어진다. body 아래에는 div, section 등 태그 요소로 나누어진다. 여기서 body는 부모(상위) 엘리먼트, 그 아래 div나 section은 자식(하위) 엘리먼트라고 칭한다. 예시) section을 기준으로 body는 부모 엘리먼트이다. body를 기준으로 section은 자식 엘리먼트이다. body를 기준으로 div는 후손 엘리먼트이다. div를 기준으로 body는 조상 엘리먼트이다. nav를 기준으로 div는 형 엘리먼트이다. div를 기준으로 nav는 인접동생 엘리먼트이다. [텍스트 속성] 텍스..

[너비 속성] [px과 %] 웹 상에서는 px(비트맵) 이미지 기반이다. 비트맵은 색상정보를 가진 px들이 모여서 이미지를 이루는 것을 이야기한다. 비트맵이미지는 사이즈 조절이 들어가면 해상도가 깨진다. (전달된 이미지를 그대로 옮겨야함) 사이즈 조절이라는 말은 원본 파일을 이러저리 옮기면 해상도가 깨진다는 뜻이다. 웹에서 수치 단위가 들어갈 때 px단위 또는 %단위를 주로 사용한다. px(픽셀)은 고정형에서 사용한다. (100px = 1px * 100개) %(퍼센트)는 반응형에서 사용한다. px단위를 사용하여 수치를 고정시키면 반응형으로 사용할 수 없다. %단위를 사용하여 수치를 고정시키면 반응형으로 사용할 수 있다. 반응형이라는 것은 웹 페이지의 칸을 줄이거나 늘렸을 때 해당 페이지 넓이에 맞게 조절..

[주석] 주석은 화면에 직접적으로 나타나지 않는다. html의 주석 형식은 css의 주석 형식은 /* */ js의 주석 형식은 // 또는 /* */ (//는 문장 단위의 주석 처리, /* */은 문단 단위의 주석처리) 주석하고 싶은 구간을 선택하고 'Ctrl + /' 입력하면 주석처리가 가능하다. [주석의 용도] 1. 메모 2. 코드를 실행시키지 않을 때 3. 개발자 간의 협업 또는 코드 구조 공유 See the Pen 주석 by psm817 (@psm817) on CodePen. [태그] html이 브라우저에 불러질 때, 제대로 알아들을 수 있도록 작성되는 코드이다. 여기서 말하는 브라우저는 edge, safari, firefox div태그 : 가장 많이 사용하는 태그. NaV, a처럼 역할이 있는 태..