사이먼's 코딩노트

[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처럼 역할이 있는 태..