본문 바로가기

HTML511

[CSS] Float (레이아웃 구성) 플롯(float, 매우 중요) 웹 페이지 레이아웃을 구성할 때 반드시 사용하는 속성이다. 키워드 left right none 플롯을 사용할 때 주의해야 할 점이 있다. 부모의 높이 값이 지정 안 되는 현상이 일어나는 것이다. 부모 요소에 1. 가상 요소:after { content: ""; display: block; clear: both;} 2. overflow: hidden 중 택 1을 적용해주면 된다. 기존 div 하나에 div 4개 박스를 넣고 border 값을 줘보았다. 자식 박스를 float left 했더니 이렇게 이상하게 돼있다. 지금이야 border를 적용시켜 눈으로 확인이 쉽지만 나중에 오류가 나면 찾기 힘들다. 첫 번째 방법을 적용하여 부모 박스에 .box:after {content: .. 2022. 9. 26.
[CSS] 패딩과 마진 (padding, margin 속성을 통한 레이아웃 구성) 패딩과 마진(매우 중요) border 기준으로 안쪽 여백은 padding 바깥 여백은 margin이다. 개발자 도구로 마우스를 올렸을 때 초록과 주황으로 구분할 수 있다. F12로 접속 후 Element에서 영역 포인터 아이콘 선택 혹은 Ctrl + Shift + C로 개발자 도구의 마우스 포인터를 사용할 수 있다. 스타일 시트에서 p 태그에 패딩을 넣어보겠다. p { border: 1px solid #777; width: 300px; height: 100px; padding: 10px; /* 전부 */ padding: 10px 20px; /* 위아래, 좌우 */ padding: 10px 20px 30px 40px; /* 12시부터 시계방향 */ } padding right, left 등을 사용하여 하나.. 2022. 9. 26.
[HTML, CSS] display 속성 (메뉴 만들기) display 속성 (중요) display 속성은 태그 영역 표현 방식을 지정하는 속성이다. none - 태그를 화면에서 보이지 않게 한다. block - 태그를 block 형식으로 지정 inline - 태그를 inline 형식으로 지정 우리는 html에서 블록과 인라인 속성에 대해 배웠다. HTML 기초지식(태그, 블럭과 인라인, ul, li, 하이퍼링크, table form 예제) 방학 중 특강을 들으며 내가 배운 것을 블로그에 정리해보겠다. 이 글은 간단하게 핵심적인 html, css 기초 문법을 보고 이해하는데 도움이 될 것이다. 교재 : html5 웹 프로그래밍 입문 (3판) 웹이란? anhanryang.tistory.com CSS에서는 HTML에서 선언한 인라인 요소도 블록 형식으로 바꿔줄 수.. 2022. 9. 26.
[HTML] 폰트 (폰트 적용, 글씨 크기, 정렬) 폰트 font 관련 속성 한 번에 설정하기 font-xxx = font 내부 단일 속성 xxx 설정하기 ex) font-size, font-weight 먼저 사용하고 싶은 폰트를 검색한다. 네이버, 구글 등이 폰트를 제공한다. 구글 웹폰트 검색 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 마음에 드는 폰트 선택 후 화면이다. 화면 큰 글씨 Styles 우측에(현재 가려져 있음) + select 버튼을 선택하면 사진 우측 하단에 link, import 형식으로 폰트를 가져다 쓸 수 있는 코드를 제공한다. 그리고 CSS 룰 또한.. 2022. 8. 4.
[HTML] <video> 태그 사용 방법 (인코딩, controls 속성) video 태그는 사용 방법이 매우 간단하다. Your browser does not support the video tag. 태그를 열어주고 width 원하는 너비와 height 높이값을 준다. (안 주면 기본 크기로 재생된다.) 태그를 열어 어떤 동영상을 어떤 유형(mp4 등)으로 넣을지 설정한다. 인코딩 이때 html을 여는 브라우저가 지원하는 동영상 유형인지 잘 확인하고 유형을 설정하거나 인코딩을 해야 오류가 없다. mp4는 폭넓게 모든 브라우저에서 지원하는데 재생이 안 돼 확인해보니 H.264 + AAC 방식으로 인코딩 된 MP4 포맷 이어야 한다. 이후 source가 재생이 안 될 경우 화면에 표시할 텍스트를 넣어준다. controls 항목은 플레이, 정지와 같이 비디오 실행을 제어할 수 있게.. 2022. 7. 17.
[HTML] <li> 태그 {<ul>, <ol>, 목록(list) 만들기} HTML은 웹 사이트에 표시되는 뼈대이다. 깔끔한 화면의 정돈을 위해선 는 매우 중요하다. 먼저 이 목록 태그들은 모두 '블록' 요소이다. 할당된 범위가 있어 자동으로 개행이 된 것처럼 화면에 보인다. HTML 블록과 인라인의 개념 (특징, 주의할 점) 블록과 인라인 제일 큰 제목 h1 Header2 h3 + tab : 자동완성 글씨를 쓸 때 사용하는 태그 strong아무글자 행에서 드래그하지않고 ctrl + c, v 사용가능 오른쪽 작성된 코드와 왼쪽 내용을 비교해보면 태그 anhanryang.tistory.com 태그는 숫자를 자동으로 내부 li리스트에 부여해준다. 다음으로 태그는 숫자를 없애고 기본 속성의 아이콘이 앞에 붙는다. 는 단독으로 쓸 수 없어 혹은 내부에 들어간다. 바로 확인해보자. ol.. 2022. 7. 17.
[HTML] <table> 테이블 태그 (rowspan, colspan, border 사용 방법) 태그는 HTML 문서에서 표를 만드는 태그다. 행과 열을 넣기 위해 , 등을 태그 안에 함께 작성한다. 이전에는 웹 페이지의 레이 아웃을 구성할 때 태그를 이용하여 많이 구성하였다고 한다. 하지만 적당한 사용 방법이 아니므로 레이아웃 구성시에는 태그와 CSS를 이용하는 것이 좋다. 먼저 테이블 태그를 열어보자 테이블 내부에 border라는 속성은 테두리를 의미한다. 픽셀 값을 넣어 테이블의 윤곽을 설정한다. 픽셀 값, 줄 종류, 줄 색상 ex) 1px, solid, #777 같은 형태로 다양한 값 적용이 가능하다. 픽셀만 정해주도록 하자. 이제 테이블 내부에 tr, td로 행과 열을 넣어야 할 것이다. align은 맞추다, 즉 정렬의 의미를 가진 속성이다. VS code에서 작성 시 center, lef.. 2022. 7. 17.
[HTML] <a> 앵커 태그 (href, target, 새 탭으로 열기) 앵커 태그 자주 쓰는 태그 중 하나로 흔히 ppt와 한글문서에서도 존재하는 하이퍼링크 개념이다. a 태그를 누르면 담겨있는 주소로 이동하는 방식이다. 속성에 값을 넣어 다른 url 혹은 다른 html로 이동 가능하다. 기본 형태 이름 정상적으로 네이버, 구글, hello.html로 이동이 된다. 기본적으로 a + tab으로 자동완성을 사용하면 href만 나오는데 하이퍼링크를 클릭했을 때 이 페이지에서 표시할지 새 페이지에서 열지 지정하는 속성이 있다. 바로 target 이다. 기본 설정은 입력하지 않아도 _self로 설정되어있다. 그래서 보이는 화면에서 이동만 하게된다. 하지만 target에 _blank 속성을 넣어주면 새 탭에서 열리는 것을 확인할 수 있다. 구글로 이동 새 탭으로 열기 결과 ( 클릭 .. 2022. 7. 17.
[HTML] 블록과 인라인의 개념 (특징, 주의할 점) 블록과 인라인 제일 큰 제목 h1 Header2 h3 + tab : 자동완성 글씨를 쓸 때 사용하는 태그 strong아무글자 행에서 드래그하지않고 ctrl + c, v 사용가능 오른쪽 작성된 코드와 왼쪽 내용을 비교해보면 태그 내용은 모두 을 통해 줄바꿈을 해줘야하는데 strong을 제외한 태그들은 태그를 통한 개행이 없는 것을 확인할 수 있다. 이유는 html을 구성하는 레이아웃 요소는 블럭과 인라인 두 가지로 구분되는데 블럭은 자신의 고유한 할당 영역이 있고 크기와 너비 등이 지정이 가능하다. 고유한 할당 영역이 있기에 수직으로 쌓이게된다. 그러므로 자동으로 개행이 된 태그들은 블록 속성임을 알 수 있다. 인라인은 내부의 내용이 있어야 영역이 생기고 크기와 너비 등이 지정이 안된다. 그리고 수평하게 .. 2022. 7. 17.

티스토리툴바