본문 바로가기

분류 전체보기57

HTML에서 쓰는 다양한 태그들 텍스트 문서를 작성하는데 필요한 태그를 살펴보겠습니다. 마크업의 의미를 이해하자 어떤 태그가 있는지 아는 것도 중요하지만, 마크업의 의미를 잘 이해하고 넘어가는 게 더 중요합니다. 예를 들어서 제목 태그인 은 웹 브라우저에서 큰 글자로 두껍게 보입니다. 하지만 이런 겉모습이 제목 태그의 본질은 아닌데요. 태그의 본질은 현재 페이지에서 가장 큰 제목이라는 의미입니다. 제목 태그 ~ 문서의 제목을 나타내는 태그입니다. 조금 과장해서 예를 들어보자면 아래처럼 한국 영화에 대한 문서를 만들 수 있는데요. 한국 영화 한국 영화의 역사 1950년대: 침체기 1960년대: 황금기 1970년대: 쇠퇴기 1980년대: 암흑기 1990년대: 전환점 2000년대: 르네상스 2010년대: 최전성기 2020년대: 대격변 유명한.. 2023. 10. 19.
HTML 링크 기능 정리 링크의 상대 주소(Relative URL) 현재 폴더는 점 한 개(./)로 표시하고, 상위 폴더는 점 두 개(../)로 표시합니다. 최상위 폴더는 경로 맨 앞에 / 로 시작하면 됩니다. 특별히 index.html 파일은 이름을 생략하고 폴더 이름만 쓸 수 있습니다. myeong-ryang.html에서 최상위 폴더에 있는 index.html로 연결하는 링크 예시 홈페이지로 가기 홈페이지로 가기 홈페이지로 가기 홈페이지로 가기 URI 프래그먼트(URI Fragment) 페이지의 특정 부분을 가리키는 주소입니다. 원하는 곳에 id 속성을 지정해 두고, 링크 주소로 사용할 때는 맨 끝에 #으로 시작하는 #아이디-이름 을 쓰면 됩니다. 팀 버너스리는 "인터넷 사용 자체가 인권"[1]이라고 말했다. ... [1] .. 2023. 10. 19.
CSS 스타일 우선순위 정리 (Cascading) 캐스케이드(Cascade) 최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 걸 말하는데요. 한국어로는 "종속"이라고 번역하기도 합니다. 우선순위가 높은 규칙일수록 우선적으로 속성을 적용합니다. 스타일 시트의 종류 브라우저에서 기본으로 제공하는 스타일시트(User Agent Stylesheet)는 똑같은 선택자를 쓰고 있다면 우리가 작성한 코드보다 우선순위가 낮습니다. 예를 들어서 브라우저 기본 CSS에서 아래처럼 쓰고 있다고 가정해 볼게요. h2 { display: block; font-size: 1.5em; ... font-weight: bold; } 이때, 우리가 style.css 파일에서 아래처럼 쓰면, 우리가 작성한 스타일시트(Author .. 2023. 10. 19.
CSS 선택자 정리 CSS 선택자(CSS Selector) CSS 규칙에서 맨 앞에 적어 주는 걸 CSS 선택자라고 부릅니다. 선택자를 사용해서 이 규칙을 어떤 요소들에 적용할지 선택할 수 있습니다. 선택자 { 선언; 선언; 선언; } 선택자 목록 콤마(,)로 선택자를 연결하면 여러 선택자에 같은 규칙을 적용할 수 있습니다. 선택자1, 선택자2 { ... } 선택자 붙여 쓰기 여러 조건을 동시에 만족하는 요소를 선택하고 싶다면 선택자를 붙여서 쓸 수 있습니다. 예를 들어서 아래 HTML 코드에 있는 태그를 선택해 볼게요. 몽골 대자연으로 떠나는 여행 예시 1. 아이디 + 클래스 #mongolia.title 예시 2. 클래스 + 클래스 .large.title 예시 3. 태그 + 아이디 + 클래스 h2#mongolia.larg.. 2023. 10. 19.

티스토리툴바