티스토리

placidcy
검색하기

블로그 홈

placidcy

placidcy.tistory.com/m

placidcy 님의 블로그입니다.

구독자
9
방명록 방문하기

주요 글 목록

  • <iframe> 현재 웹 페이지에 다른 문서를 포함할때 사용한다 태그 안에는 요소를 지원하지 않는 브라우저를 위한 텍스트를 포함시킬 수 있으며 해당 텍스트는 사용하는 브라우저가 지원하지 않을 경우에 나타난다 공감수 0 댓글수 0 2022. 4. 18.
  • <blockquote> 다른 출처로부터 인용된 영역을 정의할때 사용되며 들여쓰기가 적용된다 보통 짧은 텍스트의 경우 태그를 사용한다 공감수 0 댓글수 0 2022. 4. 18.
  • <address> 해당 페이지에 대한 저작자의 주소나 번호 / 이메일 등을 표현할때 사용된다 태그 안에 있는 텍스트들을 이탤릭체로 표현한다 공감수 0 댓글수 0 2022. 4. 18.
  • <i> 특정 글자를 다른 분위기를 내기 위해 또는 음성을 위한 텍스트 영역을 지정할때 사용된다 태그 안의 글자들은 이텔릭체로 표현되며 기울어지게 된다 공감수 0 댓글수 0 2022. 4. 18.
  • <font> 글자의 색상 / 크기 / 글꼴을 설정한다 1. color : 글자의 색상 지정 2. size : 글자의 크기 3. face : 글꼴 지정, 지정하지 않을경우 입력하지 않아도 된다 공감수 0 댓글수 0 2022. 4. 18.
  • <pre> 미리 정의된 형식의 텍스트를 정의할때 사용된다 미리 정의된 형식은 시스템에서 미리 정의된 글꼴을 나타내며 텍스트의 줄바꿈 / 여백/ 띄어쓰기를 그대로 표현한다 공감수 0 댓글수 0 2022. 4. 18.
  • <code> 컴퓨터의 코드를 나타낼때 사용된다 해당하는 컴퓨터의 코드는 파일이름, 프로그램의 코드, 컴퓨터가 인식할 수 있는 문자를 추가할 수 있다 공감수 0 댓글수 0 2022. 4. 18.
  • <canvas> 자바스크립트와 같은 스크립트 언어를 이용해 그래픽 컨텐츠를 표현할때 사용된다 그래픽 관련 컨테이너 기능만 수행하며 그래픽을 구현할때는 스크립트 언어를 사용한다 공감수 0 댓글수 0 2022. 4. 18.
  • <a> 하나의 페이지에서 다른 페이지로 연결하는 하이퍼링크를 설정하고 외부 페이지(html)으로 연결하는 설정도 할 수 있다 href 속성으로 링크의 목적지를 설정한다 공감수 0 댓글수 0 2022. 4. 18.
  • <video> 비디오 파일을 정의하는 태그 MP4, WEBM, Ogg 파일을 지원한다 src 속성으로 불러올 파일의 경로를 입력할 수 있고 type 속성으로 파일 형태를 지정할 수 있다 공감수 0 댓글수 0 2022. 4. 18.
  • <textarea> 사용자가 여러 줄의 텍스트를 입력할 수 있는 영역을 설정하는 태그 글자의 개수 제한 없이 텍스트를 입력할 수 있고 cols 속성과 row 속성을 통해 가로/ 세로 길이를 조절할 수 있다 공감수 0 댓글수 0 2022. 4. 18.
  • <style> 해당 요소의 스타일(CSS)을 지정할때 사용된다 공감수 0 댓글수 0 2022. 4. 18.
  • <div> 특정 영역의 구역을 나누거나 요소들을 하나의 그룹으로 묶을 때 사용한다 span 태그와 다르게 블록 형태의 특징을 가지고 있고 웹 페이지의 영역을 나누는데에도 사용된다 공감수 0 댓글수 0 2022. 4. 18.
  • <span> 웹 페이지에서 인라인 요소들을 하나의 그룹으로 묶을 때 사용한다 특정한 의미를 가지고 있지 않고 인라인 형태의 특징을 가지고 있다 공감수 0 댓글수 0 2022. 4. 18.
  • <select> 선택지를 제공하는 드랍 다운 리스트를 설정한다 option 태그를 통해 선택할 내용들을 설정할 수 있고 value 속성으로 해당 선택지에 대한 이름을 설정한다 공감수 0 댓글수 0 2022. 4. 18.
  • <link> 외부 파일과 연결하거나 해당 사이트로 연결해주는 기능을 한다 head태그 안에 위치해야 하며 여러개의 link 태그를 추가 할 수 있다 1. href : 외부 요소나 연결할 사이트 주소를 설정한다 2. rel : 현재 페이지와 연결할 페이지의 관계 표시 - stylesheet: 스타일시트로 연결 - alternate : 문서의 대안을 연결(프린트나 번역 사이트) - author : 저작자로 연결 - help : 도움말로 연결 - search: 검색 도구로 연결 공감수 0 댓글수 0 2022. 4. 18.
  • <figure> / <figcaption> 1. : 이미지 태그 / 오디오 태그 / 비디오 태그등을 하나의 그룹으로 지정하는 태그 2. : 해당 태그에 대한 설명이나 제목을 나타내는 태그 공감수 0 댓글수 0 2022. 4. 18.
  • <legend> 요소의 제목 또는 내용에 대한 설명을 나타낼때 사용된다 하나의 그룹으로 묶여져 있는 태그들의 제목으로도 사용된다 공감수 0 댓글수 0 2022. 4. 18.
  • <fieldset> 여러 입력 태그들을 하나의 그룹으로 묶을때 사용되는 태그 공감수 0 댓글수 0 2022. 4. 18.
  • <input> 사용자의 텍스트 입력을 처리하는 태그 type 속성으로 사용자의 입력 형태를 지정할 수 있고 기본값은 text로 설정되어 있다 1. button : 클릭하는 버튼 2. checkbox : 체크 박스 3. email : 이메일을 입력할 수 있는 박스 4. file : 업로드할 파일을 입력할 수 있는 영역과 파일 선택 버튼 5. submit : 서버에 데이터를 제출하는 버튼 6. search : 검색어를 입력할 수 있는 버튼 7. text : 기본값으로 한 줄로 된 텍스트를 입력할 수 있는 영역 8. radio : 라디오 버튼(동그라미 버튼) 9. password : 비밀번호 입력 10. hidden : 사용자에게 보이지 않는 입력 영역 11. date : 날짜 선택 공감수 0 댓글수 0 2022. 4. 18.
  • <form> 사용자의 입력과 클릭 등에 대한 사용자의 입력에 대한 태그 다음의 태그들을 한가지 이상 포함할 수 있다 action 속성에는 사용자의 입력에 대한 처리를 담당하는 외부 요소의 경로를 대입한다 이름 : 학번 : 학과 : 공감수 0 댓글수 0 2022. 4. 18.
  • <img> 이미지를 추가할때 사용되는 태그 src 속성으로 이미지 경로를 대입한다 1. src : 이미지의 경로 2. width: 이미지의 가로 길이 3. height: 이미지의 세로 길이 4. alt : 이미지가 잘려나갔을때 대체 텍스트 공감수 0 댓글수 0 2022. 4. 18.
  • <em> / <strong> 1. 특정 글자를 강조하기 위한 태그로 문장에서 글자의 의미를 변경할때 사용한다, 글자가 기울어진다 2. 태그와 마찬가지로 글자를 강조하기 위한 태그로 문장에서 특정 글자의 중요성을 강조할때 사용한다,글자의 굵기가 변경된다 공감수 0 댓글수 0 2022. 4. 18.
  • <b> 특별한 목적 없이 단순히 글자를 강조하기 위해 사용하는 태그 글자의 굵기를 변경한다 공감수 0 댓글수 0 2022. 4. 18.
  • <audio> 소리 파일(음악 등)을 사용할때 쓰이는 태그로 MP3 / WAV/ ogg 파일을 지원한다 공감수 0 댓글수 0 2022. 4. 18.
  • <table> 표를 표현하는 태그 1. table : 테이블 영역을 나타내는 태그 2. caption : 테이블의 제목이나 설명을 작성하는 태그 3. tr : 테이블의 행을 의미하는 태그 4. th : 테이블의 제목 셀을 의미한다 / 부모 태그인 tr 안에 있어야 한다 5. td : 테이블의 일반 셀을 의미하며 테이블의 내용이 들어간다 / 부모 태그인 tr 안에 있어야 한다 6. border : 테이블 셀 주위의 선에 대한 처리 7. width : 테이블의 가로 너비를 설정한다 8. cellpadding: 셀과 셀 안의 컨텐츠와의 간격을 조절한다 9. cellspacing : 셀과 셀 사이의 간격을 설정한다 - 셀(열) 병합 속성 1. colspan : 같은 행의 열에 대한 칸을 병합한다 2. rowspan : 다른 .. 공감수 0 댓글수 0 2022. 4. 18.
  • 가상 요소 특정 요소에 하나의 요소를 추가한다 1. ::first-line : 해당 가상 요소는 텍스트의 첫번째 줄에만 특정 스타일을 입혀준다. 문장의 첫 줄은 상위 요소의 크기나 브라우저의 크기에 따라 달라질 수 있다 p::first-line { color: #ff0000; font-variant: small-caps; } 2. ::first-letter : 텍스트의 첫 문자에 특정 스타일을 입혀준다. p::first-letter { color: #ff0000; font-size: xx-large; 3. ::before / ::after 요소의 내용에 추가된다 보통 이미지나 글자, 그라데이션 등을 추가할때 사용한다 h1::before { content: 'hello'; } h1::after { content: u.. 공감수 0 댓글수 0 2022. 4. 18.
  • 가상 클래스 앵커 가상 클래스 앵커 가상 클래스는 화면의 특정 요소에 커서가 향했을 때 특정 디자인을 입혀주는 등 어떤 요소에 동적인 스타일을 입혀준다. 앵커 가상 클래스에서 가장 자주 쓰이는 패턴이다. :link는 아직 방문하지 않은 링크를 나타낸다. 다음을 사용해서 아직 방문하지 않은 링크를 파란색으로, 방문한 링크는 밑줄 없이 보라색으로 표현할 수 있다. a:link { color: blue; } a:visited { color:purple; text-decoration: none; } 몇가지 앵커 가상 클래스는 사용자의 행동에 영향을 받는다. a:hover { color: red; } a:active { color: gray; } a:focus { color: yellow; } :hover : 사용자가 해당 .. 공감수 0 댓글수 0 2022. 4. 18.
  • text-overflow 텍스트가 해당 요소의 범위를 넘어갈경우 표현 여부를 설정하며 다음과 같은 조건이 있다 1. overflow값이 hidden / auto / scroll 값이여야 한다 2. white-space 값이 nowrap 또는 텍스트가 다음 줄로 이동되지 않는 경우 - clip : 넘어간 범위의 텍스트를 자른다 - ellipse : 넘어간 범위의 텍스트를 "..." 기호로 대신 표현한다 공감수 0 댓글수 0 2022. 4. 18.
  • perspective 해당 요소의 3D 좌표상에서의 원근법을 설정하기 위한 기능으로 기본적으로 해당 요소의 부모 요소에 transform-style / perspective 속성을 추가한다 perspective에 대입하는 값은 관찰자가 z축을 기준으로 설정된 거리만큼 떨어져 있다고 가정한 값이다 ex) perspective: 300px일때 -> 관잘차는 요소에 300px만큼 떨어진 거리에서 보고 있다고 가정 또는 특정 요소에만 원근법 속성을 적용시키려면 transform: perspective(300px); 위에 처럼 transform 속성에 perspective 속성을 대입한다 공감수 0 댓글수 0 2022. 4. 17.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.