TIL 14 - HTML, CSS

eyan31·2022년 7월 6일
CSSTILhtml
0

TIL

목록 보기
14/25
post-thumbnail

TIL | 07.06의 기록

HTML 태그

  • <ol>, <li> : 순서가 있는 목록
  • <ul>, <li> : 순서가 없는 목록 (disk, circle, square)
  • <dl>, <dt>, <dd> : 설명 목록
  • <table> : 표 만들기
    • <caption> : 표 제목
    • <tr> : 행
    • <td> : 셀
    • <th> : 제목 셀
    • <colspan> : 열 합치기
      • <td colspan="합칠 셀의 개수">셀의내용</td>
    • <rowspan> : 행 합치기
    • border : 경계선
    • <colgroup>, <col> : column을 그룹으로 만드는 태그
  • <iframe> : 웹페이지 내에 웹페이지 표시
    • src : 파일명
    • <width>, <height> : 폭, 높이
    • <frameborder> : 구분선
    • <scrolling> : 스크롤바 (yes[기본값], no)
  • <meta> : 페이지에 대한 설명을 기술
    • name 속성
      • description : 페이지에 대한 설명
      • keywords : 검색엔진에 검색되는 단어들
      • author : 작성자
    • http-equiv 속성
      • refresh : 새로고침(초단위)
      • Refresh : 일정시간이 지나면 자동으로 페이지 이동
  • <audio>, <video> : 음성파일, 영상파일 재생하기
    • src : 재생할 사운드,영상 파일
    • controls : 컨트롤바
    • autoplay : 자동재생
    • loop : 반복재생
    • preload : 전송완료 후 재생
    • width, height : 플레이어의 너비와 높이
    • poster="파일이름" : video태그에서 사용, 비디오 재생 전까지 화면에 표시될 이미지 지정
  • <form> : 폼을 만드는 기본 태그
    • method : 데이터 전송방식 (get-공개[기본값], post-숨김)
    • action : 서버페이지 파일명
    • <input> 태그의 type 속성들
      • text, passwords, search, url, email, tel, checkbox, radio, number, color, range, date, month, week, time, datetime, datetime-local, submit(submit이 발생하면 action이 실행됨), reset, image(submit버튼과 같은 기능), button, file, hidden(사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만들때)
    • placeholder : 입력란에 표시하는 힌트, 필드를 입력하면 사라짐
    • required : 필수 입력 필드
    • autofocus : 페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시
    • readonly : 입력 금지
    • textarea : 여러줄의 텍스트
      • cols, rows : 칸, 줄 지정
    • <select>, <outgroup>, <option> : 여러 옵션 중 선택, 드롭다운 목록
      • size : 드롭다운 항목의 개수 (select 태그 속성)
      • multiple : 목록에서 둘 이상의 항목을 선택할 때 사용 (select 태그 속성)
      • label : 그룹 이름 (outgroup 태그 속성)

CSS 기본

  • 기본 형식 : 선택자 {속성1: 속성값1; 속성2:속성값2 }
  • 주석 : / ~ /

스타일 시트

  • 인라인(inline) 스타일 : 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시, 스타일을 적용하고 싶은 태그에 style 속성을 사용해 style="속성:속성값;" 형태로 스타일 적용
  • 내부(internal) 스타일 시트 : 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것, 모든 스타일 정보는 <head>~</head> 태그 안에서 정의, <style>~</style>태그 사이에 작성
  • 외부(external) 스타일 시트 : 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용, style태그 없이 link태그만 사용해 미리 만들어 놓은 외부 스타일시트 파일 연결

CSS 기본 선택자

  • 태그 선택자 : 문서에서 특정 태그를 사용한 모든 요소에 스타일이 적용됨, 여러 태그에 같은 스타일 적용 가능

    • span, b, strong{ 
 	color:#0000ff; 
 	font-weight:bold; 
 	font-size:30px;
 }

  • id 선택자 : 요소의 특정 부분에만 스타일 적용, #다음에 id이름 지정, 문서 안에서 한번만 사용한다면 id 선택자로 정의

    • #txt{
 	background:#ddd; 
 }

  • 클래스 선택자 : 요소의 특정 부분에만 스타일 적용, 마침표(.) 다음에 클래스 이름 지정, 문서 안에서 여러번 반복할 스타일이라면 클래스 선택자로 정의, 같은 클래스를 여러곳에 중복 선언 가능

    • .a{
 	background:#8a3;color:#fff;font-size:50px; 
}
profile
eyan31
터벅터벅 개발자 지망생의 하루
이전 포스트

TIL 13 - HTML

다음 포스트

TIL 15 - HTML, CSS

0개의 댓글