욕심많은 햄톨

단위: px, cm, em, rem, %, vw, vh * 값이 0인 경우 보통 단위 생략 block요소 div { width: auto; /* 100% */ height: auto; /* 0 */ } inline요소 인라인 요소는 크기를 지정할 수 없고 필요한 만큼 너비를 사용하기 때문에 width와 height 코드는 사실상 의미가 없다. span { width: auto; /* 0 */ height: auto; /* 0 */ }

기본 선택자 1. 전체 선택자 * {...} 2. 태그 선택자 태그명 {...} 2. 클래스 선택자 .클래스명 {...} 4. 아이디 선택자 #아이디명 {...} 복합 선택자 1. 일치 선택자 a는 기본 선택자, b는 기본 선택자 ab {...} 2. 자식 선택자 b는 a의 자식 요소 a > b {...} 3. 후손(하위) 선택자 b는 a의 후손(하위) 요소 a b {...} 4. 인접 형제 선택자 a의 다음 형제 요소 b 하나만 선택 a + b {...} 5. 일반 형제 선택자 a의 다음 형제 요소 b 모두 선택 a ~ b {...} * 자식 요소는 후손(하위)요소에 포함된다. 부모 요소는 조상(상위) 요소에 포함된다. 가상 클래스 선택자 1. hover a에 마우스(포인터)가 올라가 있는 동안 a 선..

html, css 코드가 출력되는 화면이 브라우저마다 다를 수 있다. 내가 원하는 스타일을 모든 브라우저에서 동일하게 출력되게 하고싶다면 브라우저마다 다르게 제공되는 CSS스타일을 초기화하고 내가 적용한 CSS스타일만 화면에 출력되도록 해야한다. CSS를 초기화하는 코드는 구글에 reset css cdn을 검색하면 나온다. 이 코드를 HTML 문서 내 링크된 CSS코드 위에 복붙하면 된다. CSS코드를 초기화하는 코드기 때문에 내가 작성한 CSS코드 위에 작성해서 초기화를 해주어야 한다. CSS 초기화 전 크롬 브라우저에서 코드 출력) Header1 Header2 Header3 Header4 Paragraph Unordered List Item1 Unordered List Item2 Unordered L..

코드를 맞게 썼음에도 에러가 뜨는 경우, 스크립트 코드 위치를 의심해볼 수 있다. 아래와 같은 코드도 스크립트 위치가 잘못되어 콘솔에 에러메시지가 떴다. html 코드) hamtol javascript 코드) const myName = document.getElementById('my-name'); console.log(myName.innerText); 콘솔 에러) 브라우저는 코드를 한 줄 한 줄 읽어나가는데, 스크립트 코드를 읽고 있을 때는 html의 부분을 아직 읽기 전이기 때문에 자바스크립트에서 쓰이는 html데이터가 아직 없는 상태인 것이다. 위의 코드상 브라우저는 이렇게 적으면 코드를 끝까지 읽은 후 스크립트 코드로 돌아가기 때문에 데이터를 꺼내는데 문제가 없어진다. 하지만 defer을 쓰려면 ..

자주 쓰이는 HTML 특수 기호 1. html 코드에 아무리 띄어쓰기를 해도 화면에는 띄어쓰기 한 번만 출력된다. 코드) 동해물과 백두산이 결과) 이때는 태그를 사용해서 서식 그대로 출력하는 방법도 있고 (단, pre태그는 monospace글꼴로 화면에 표시됨) 코드) 동해물과 백두산이 특수 기호를 사용해 출력하는 방법이 있다. 는 띄어쓰기 한 번과 같다. 코드) 동해물과 백두산이 결과) 2. html태그인 를 화면에 출력하고 싶다면 특수 기호를 사용하면 된다. 결과) 그 외 특수기호 https://www.freeformatter.com/html-entities.html#misc-html-entities Complete list of HTML entit..

table은 예전에 css가 발달하지 않았을 때는 레이아웃용으로 쓰였다. 하지만 지금은 절대 레이아웃용이 아닌 표를 렌더링하고자 할 때 쓰여야 한다. : 표의 영역을 감싸는 용도. : 행 , : 열 (th는 제목용으로 쓰이며 두꺼운 글자로 표시된다.) table 코드를 작성할 때는 태그로 가이드를 잡아야 수월한데 행 태그 다음 열 태그를 작성하는 것이 좋다. 테이블 예제 데이터 타입과 값 데이터 타입 값 1 알파벳 A 2 숫자 7 결과)

다른 페이지, 같은 페이지 위치(#, 해시 태그), 파일 다운로드, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정. target속성의 _self, _blank로 같은 탭에서 열지 다른 탭에서 열지 설정할 수 있다. (디폴트는 _self) 같은 페이지로 연결하는 예제. id를 지정한 후 에 id를 연결하면 된다. id를 연결할 때는 앞에 #을 붙여야 된다. 제목1 제목2 제목1 제목2 제목3 ✏️class속성과 id속성의 차이점 class속성의 값은 중복될 수 있지만 id속성의 값은 중복될 수 없다. 하나의 태그에 하나의 아이디만 가질 수 있다.

html에서 작성한 코드는 아무리 띄어쓰기를 하고 엔터를 쳐서 줄바꿈을 해도 띄어쓰기 하나로 렌더링된다. 내가 원하는 대로 화면에 출력하기 위해서는 태그와 태그를 사용하면 된다. : 문단 나누기. : 빈태그. 줄바꿈. 내가 작성한 텍스트를 그대로 화면에 출력하고 싶다면 태그를 사용하면 된다. 단, 태그 사이의 텍스트를 그대로 출력하기 때문에 태그를 텍스트 맨 처음, 맨 뒤에 딱 붙이고 tab을 쓰지않는 것이 오류를 예방하기에 좋다. Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Antarctica. Some species live in houses where the..

주제별로 문단을 분리하기 위해 넣는 수평선. 수평선을 넣기 위해 쓰는 태그가 아니라 의미적으로 분리하기 위함의 목적이다. 필요없으면 css에서 border: none;으로 숨기면 된다. 모든 html 요소는 사각형이므로 태그도 역시 사각형이다. 수평선으로 보이는 것은 위 아래 변이 합쳐져 있는 것이다. padding값을 주면 사각형으로 보이는 것을 확인할 수 있다. 때문에 border: 2px; 값을 주면 위 아래 변이 각각 2px가 되어 4px의 수평선으로 보이게 된다. 태그에 두께를 줄 때는 border: none;으로 네 변을 숨기고 border-top: 2px;처럼 하나의 변을 지정하여 두께를 적용하면 2px의 수평선으로 보이게 될 것이다. * dashed는 점선 hr { border: 2px d..

, , 1. , : 순서o. 2. , : 순서x. 주로 사용. , , (용어(키)), (정의(밸류))의 집합을 로 감싸는 형태. 안에는 ,만 있어야되기 때문에 스타일 적용 시 한계가 있음. 그래서 ,,로 대체한 경우도 꽤 있다. ✏️, , 를 , , 로 대체한 예제 Coffee Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffea species. Milk Milk is a nutrient-rich, white liquid food produced by the mammary glands of mammals. Coffee Coffee is a brewed drink prepared..