HTML, CSS/HTML (14) 썸네일형 리스트형 [HTML] 시맨틱 태그 와 기능은 같지만 의미가 담겨있는 태그을 뜻한다. [HTML] <link>, <script> 태그는 여러 가지 속성의 요소들을 가져올 수 있다. rel="stylesheet" href="css.css" css 파일에 접근할 수 있다. 글꼴에서 배웠듯이, 웹폰트를 받을 수 있다. rel ="icon" href="youtube.ico" icon을 적용시킬 수 있다. 태그는 자바스크립트 파일을 적용할 수 있는 태그이다. 주로 태그의 마지막에 쓴다. [HTML] 폼 다음과 같은 로그인 화면을 만들려면 어떻게 해야 할까? 이걸 만들기 위해 사용하는 것이 폼이다. 아이디 비밀번호 로그인 위 화면을 만드는 가장 간단한 폼이다. 위 화면과 같은 폼을 만든다는 선언을 하는 태그. 안쪽에 만들어 주면 된다. input의 이름을 쓰고 싶을 때 사용. 아이디 아이디 라벨 안 쪽에 을 넣거나 input의 id와 for를 일치시키면 클릭 시 포커싱이 간다. 값을 입력하는 태그. name은 폼 전송시 입력한 값에 매칭되는 이름이다. placeholder를 사용하면 위 네이버 로그인 화면처럼 아이디라는 글씨를 띄울 수 있다. input::placeholder{ 디자인; } placeholder의 스타일을 바꾸려면 CSS에서 input::placeholder를 사용하면 된다. 반드시 입력.. [HTML] 멀티미디어 는 이미지를 불러오는 역할을 한다. src="주소" 이미지의 위치를 적는다. alt="설명" 이미지에 대한 설명을 적는다. 이미지가 오류가 나서 나타나지 않을 때 이 설명이 나온다. width="너비" height="높이" 크기를 지정한다. 단위를 적지 않으면 px로 처리한다. 는 동영상을 불러오는 역할을 한다. src="주소" 동영상의 위치를 적는다. width="너비" height="높이" 크기를 지정한다. 단위를 적지 않으면 px로 처리한다. autoplay 페이지를 열 때 자동으로 동영상을 자동으로 재생한다. muted 동영상의 기본값을 음소거로 한다. (크롬의 경우, muted를 하지 않으면 autoplay가 작동하지 않음) controls 동영상을 멈추고 음량을 조절할 수 있는 컨트롤창을 만든.. [HTML] 테이블 헤더1 헤더2 내용1 내용2 결과합1 결과합2 테이블은 표를 넣는 태그이다. 표에서 머리글이 들어가는 곳이다. 표에서 데이터가 들어가는 곳이다. 표에서 바닥글이 들어가는 곳이다. tr을 통해 행을 나눠준다. 데이터가 들어가는 것을 나타낸다. 데이터가 뜻하는 제목을 나타낸다. 헤더1 헤더2 내용1 내용2 결과합1 결과합2 다음과 같은 표처럼 나오게 된다. table { border: 1px solid red; /* 테두리 색깔을 빨갛게*/ border-collapse: collapse; /*테두리 사이 간격 없애기*/ } table { border-spacing: 10px; /*테두리 사이 간격 조정*/ } border 요소를 사용해서 테두리 색깔을 변경할 수 있다. border-collapse: coll.. [HTML] 리스트 항목 1 항목 2 항목 3 항목 4 항목 1 항목 2 항목 3 항목 4 은 orderded list, 은 unordered list로 각각 다음과 같이 나온다. 항목 1 항목 2 항목 3 항목 4 항목 1 항목 2 항목 3 항목 4 즉, ol은 숫자처럼 순서가 있는 list를 나타낼 때 사용하고, ul은 순서가 없는 list를 나타내는 데 사용한다. 속성으로는 type이 존재 type="a" a, b, c 순으로 출력 type="A" A, B, C 순으로 출력 type="i" 소문자로 로마숫자 표기 type="I" 대문자로 로마숫자 표기 type="1" 1, 2, 3 순으로 숫자로 표기(default 값) CSS에서 list-style로 바꾸는 게 가능하다. ol{ list-style: disc; } u.. [HTML] 텍스트 태그 HTML은 마크업 언어로 내용의 추가적인 정보를 나타내는 역할을 한다. 큰 제목 작은 제목 본문 본문 중요한 본문 강조 취소 인용문1 인용문2 인용문 log104 22 body 서식텍스트 ~~ 문서의 제목을 나타내는 태그이다. h1일 수록 큰 제목이다. 본문을 나타낸다. 줄 바꿈을 나타낸다. 중요한 내용을 강조할 때 쓰인다. 기본적으로 사용 시 글씨가 굵어짐. 단, 글씨를 굵게 쓰고 싶다고 사용하면 안 됨. 강조를 할 때 사용한다. 이처럼 기울려져서 나온다. 어떤 내용을 적었다 취소했다는 것을 나타낼 때 사용한다. 취소처럼 취소선이 쳐서 나온다. , 인용할 때 사용한다. 길 때는 짧을 때는 를 사용한다. , log₂4처럼 아래 첨자 사용 시 를 사용, 2²처럼 위쪽 첨자 사용 시는 사용한다. 주제를 전환.. [HTML] 링크 abc로 가기 index로 가기 abc로 가기 index로 가기 abc로 가기 index로 가기 / (최상위 폴더), ./(현재폴더), ../(이전폴더) index.html의 경우 생략이 가능하다. [1]처럼 클릭 시 그 페이지에서의 어떤 위치로 이동하려는 것은 어떻게 하는 걸까? 이는 URL 프레그먼트라고 한다. [1] abc id를 쓰고 아이디를 href로 받으면 이동이 가능하다. 단, id의 이름이 주소창에 들어가기 때문에 띄어쓰기는 불가능하다. target 요소 : 이 하이퍼링크를 여는 위치를 정할 수 있다. 기능 : "_blank"(새 창으로 연다.), "_self"(현재창에서 넘어간다.) "아무거나"(아무거나라는 창에서 연다.) 아무거나라는 게 이해되지 않을 수 있다. 아래 예시를 들겠다. 위.. 이전 1 2 다음
