본문 바로가기

전체 글57

HTML 멀티미디어 기능 정리 이미지 파일 주소는 src 속성으로 지정합니다. 크기는 width와 height 속성으로 단위 없이 지정합니다(물론 CSS로도 크기를 조절할 수 있습니다). 이미지에 대한 설명은 alt라는 속성을 사용합니다. 비디오 파일 주소는 src 속성으로 지정합니다. 크기는 width와 height 속성으로 단위 없이 지정합니다(물론 CSS로도 크기를 조절할 수 있습니다). 그 외에 자동 재생을 하는 autoplay 속성, 음소거를 하는 muted, 조작하는 버튼들을 보여 주는 controls 속성이 있습니다. 특히 자동 재생은 불쾌감을 줄 수 있기 때문에 일부 브라우저에서는 반드시 muted와 함께 써야 동작한다는 점도 팁으로 알아 둡시다. 오디오 파일 주소는 src 속성으로 지정합니다. 자동 재생을 하는 aut.. 2023. 10. 19.
HTML 테이블 문법 정리 테이블 정보를 표로 나타낼 때는 태그를 사용합니다. 테이블의 행은 (Table Row)태그로 감쌉니다. 각 데이터들은 (Table Data) 태그로 넣습니다. Premium Standard Basic ₩15,900 ₩10,900 ₩8,900 화질 최대 FHD HD 다운로드 무제한 월 30회 불가 머리글 표에서 머리글은 태그로 감싸면 됩니다. 행은 태그로 감싸 주면 됩니다. 각 행 안에 있는 것들은 제목이기 때문에 가 아니라 라는 태그를 넣습니다. 본문에 해당하는 행들은 라는 태그로 감쌉니다. Premium Standard Basic ₩15,900 ₩10,900 ₩8,900 ... ... 바닥글 표에서 바닥글은 태그로 감싸면 됩니다. 와 마찬가지로 행은 로 감쌉니다. 제목으로 쓰는 칸은 태그를 넣습니다. .. 2023. 10. 19.
HTML 순서(목록) 리스트 정리 방법 순서 리스트(Ordered List) 항목들 사이에 순서가 있는 목록을 작성할 때 이라는 태그를 감싸고, 그 안에 항목은 태그를 씁니다. 상영작 순위 라라랜드 명량 극한직업 신과함께: 죄와 벌 국제시장 어벤져스: 엔드게임 순서 없는 리스트(Unordered List) 항목들 사이에 순서가 없는 목록을 작성할 때 이라는 태그를 감싸고, 그 안에 항목은 태그를 씁니다. 카테고리 한국 영화 외국 영화 드라마 예능 영화 프로야구 리스트 스타일링 순서 리스트에서는 type 속성으로 기호를 바꿀 수 있습니다. 라라랜드 명량 극한직업 신과함께: 죄와 벌 국제시장 어벤져스: 엔드게임 type 값실제 기호 a a, b, c, d, e, … i i, ii, iii, iv, v, … I I, II, III, IV, V, ….. 2023. 10. 19.
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.
CSS의 Display 정리 블록(Block) 위에서 아래로 차례대로 배치되는 요소입니다. 크기를 지정할 수 있습니다. 다음 태그들은 기본적으로 display 값이 block입니다. , , …, 인라인(Inline) 글을 쓰는 방향으로 줄이 바뀌면서 배치됩니다. 블록과 달리 크기를 지정할 수 없습니다. 다음 태그들은 기본적으로 display 값이 inline입니다. 참고로 이미지 같이 외부 데이터를 보여 주는 태그는 인라인이지만 크기를 지정할 수 있습니다. 인라인 블록 (Inline-block) 인라인처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용하는 display 속성입니다. float 속성 float 속성은 요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고, 그 주변으로 인라인 요소들을 배치할 수 있습니다. 블록, 인라인 .. 2023. 10. 19.
CSS 패딩과 마진 내용 정리 padding과 margin은 각각 안쪽 여백, 바깥 여백을 넣을 때 쓴다고 배웠습니다. 이것들의 사용법을 복습해보고, 좀 더 복잡한 방법도 알아볼게요. Padding 영역 안쪽에 여백을 넣을 때 사용했습니다. 상하좌우 한 번에 padding: 8px; 상하, 좌우 각각 padding: 16px 8px; 상, 좌우, 하 padding: 16px 8px 24px; 숫자의 순서는 시계 방향으로 0시 → 3시 → 6시 순서로 외우시면 됩니다. 상, 우, 하, 좌 padding: 16px 8px 24px 10px; 숫자의 순서는 시계 방향으로 0시 → 3시 → 6시 → 9시 순서로 외우시면 됩니다. padding- 속성 패딩 값을 각각 주고 싶을 때 쓰는 속성들입니다. 앞에서 상, 우, 하, 좌 값을 따로 썼던.. 2023. 10. 18.

티스토리툴바