본문 바로가기

Web/HTML+CSS

(5)
[HTML/개념] 개념 정리 03 - html5, DIV, SPAN, HTMl 엔티티, 시맨틱 마크업, 에밋 1️⃣ HTML5 - HTML을 정의하는 가장 발전된 표준: HTML은 기본적으로 HTML의 작동 방식에 대한 지침 - 새로운 요소, 속성, 행동을 가진 새로운 버전의 HTML 언어 - HTML의 작동 방식을 설명하는 문서(브라우저는 이것을 구현) https://html.spec.whatwg.org/ HTML Standard html.spec.whatwg.org - 구버전을 사용하기 위해서 다른 버전을 사용할거라고 지정해줄 수 있지만, HTML5 자체를 끌 수는 없음 2️⃣ DIV, SPAN - 주어진 요소가 문서의 콘텐츠 흐름에 들어가게 하는 방법 1) 인라인: 콘텐츠가 있는 영역만 차지 ex) 2) 블록 요소: 한 줄을 차지 ex) h, 문단 - 그룹화해서 다른 스타일을 지정하는 방법(CSS 이용) ..
[HTML/개념] 개념 정리 02 - 목록, <a> 태그, 이미지, 주석 * 본 포스팅은 udemy [The Web Developer 부트캠프 2022] 강의를 듣고 작성하였습니다. 목록 - 숫자로 된 목록 ordered list 과 순서 없이 점으로 된 목록 unordered list - 두 태그 모두 중첩된 태그로 이루어져 있음 - 내부에 , , 태그 사용 가능 - 목록 내의 단일 아이템을 표시하는 태그 - 안에는 다른 태그들을 넣을 수 있음. li 태그, b 태그 등 태그 - 하이퍼링크 - 다른 웹페이지나 현재 페이지의 다른 위치, 주소 등으로 연결 - 연결을 위해서는 href 속성이 필요함 => a 태그 안에 들어가야 함! - 현재는 파일 프로토콜을 사용하고 있기 때문에 http를 넣어줘야 함 - 인라인 태그에 속함 => 새로운 줄에 만들어지지 않음 이미지 - 닫는 태..
[HTML/개념] 개념 정리 01 - Header, html 구조, VS Code 자동정렬 * 본 포스팅은 udemy [The Web Developer 부트캠프 2022] 강의를 듣고 작성하였습니다. HTML - 콘텐츠의 구조. 마크업 언어, 완전한 프로그래밍 언어는 아님. - 웹 페이지라는 문서에 마크업을 하기 위한 언어 또는 구문 - 논문에서 탄생함 HTML ELEMENTS 태그를 사용 제목 Heading - 한 페이지 당 h1은 오직 하나만 있어야 함. 또한 항상 최상위 제목이 되어야 함 - h1과 h2 없이는 h3가 존재할 수 없음 HTML 상용구 HTML Skeleton - 모든 html 페이지에 들어가야 함 - : html5를 사용하고 있다는 표식. html 의 최신 규격을 사용한다는 뜻 - 루트 요소. 문서의 최상위 요소. doctype을 제외한 모든 내용이 이 안에 들어가야함 -..
[책] Do it! 인터랙티브 웹 페이지 만들기 Do it 시리즈는 입문자들이 보기에 좋은 시리즈이다. 나는 이제까지 총 4권의 Do it 시리즈 책을 봤는데 (본의 아니게 다 웹 관련..) 아마 지금 이야기하는 책이 끝판왕이 아닐까 싶다. - Do it! HTML5+CSS3 웹표준의 정석 - Do it! 자바스크립트 + 제이쿼리 입문 - Do it! 자바 프로그래밍 입문 - Do it! 오라클로 배우는 데이터베이스 입문 이렇게 봤었고, 이 책들을 보면서 있었던 아쉬움을 지금 포스팅할 가 보완해주는 것 같다. 혹시 나처럼 저 책들을 보고도 약간의 아쉬움을 느꼈다면, 이 책을 보는 것을 추천한다. (위에서 언급한 책들은 정말 기본에 충실한 책들이기 때문에, 저 책은 저 책대로 봐야한다. 개념을 잘 아는 것은 중요하니까) 웹페이지를 만들고 싶어서 HTML..
[HTML/Error] 티스토리 스킨 편집 시 빨간색 글씨가 뜰 경우 블로그를 조금씩 수정하고 있는데, 스킨 편집을 하려고 보니, 태그가 빨간색으로 표시되어 있었다. 누가봐도 이건 코드에 문제가 있어서인데, 내가 쓴 코드도 아니고 따로 주석도 달려있지 않아서, 코드의 전체적인 구조를 파악하기가 어려웠다. 물론 이걸 수정하지 않는다해도 홈페이지가 보이는데 큰 문제가 없다. 그러나 코드 자체도 길지 않고, 무엇보다도 매우 거슬리므로, 수정을 해보기로 했다.검색을 해보니 태그의 쌍이 안맞아서 그렇다고 해서 짝이 안맞는 태그를 찾아보기로 했다. 위 스크린샷과 같이 뒷부분 태그들이 빨간색으로 바뀌어있었다. 짝이 안맞는 태그를 찾는 건 생각보다 간단했다. 처음으로 빨간색이 뜨기 시작한 부분을 찾으면 된다. 그리고 그 부분을 잘 보면 분명 짝이 안맞는 태그가 있다. 나의 경우엔