Frontend/HTML, CSS17 [CSS] CSS의 기초 (내부/외부 스타일 시트, 인라인 스타일) ※ CSS의 문법 형식 크게 선택자와 선언부로 구분함. 선택자 : CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역 선언부 : 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역으로, 중괄호 안에 넣는다. : 선언부에 작성하는 스타일은 반드시 속성과 값을 한 쌍으로 작성. 세미콜론을 붙여 연속해서 작성 가능 ex) h1{color: red;} 선택자 / 속성 / 값 중괄호 안을 선언부라고 함. ※ 주석 /* */ 으로 사이에 주석을 작성한다. 중요한 정보 적지 않는다. ※ CSS 적용하기 대표적으로 3가지 방법이 있다. 1) 내부 스타일 시트 사용 (internal style sheet) : HTML 파일 내부에 CSS 코드를 작성하는 방법 : HTML의 style 태그를 사용해서 적용한다.. 2023. 7. 9. [HTML] 시맨틱 태그, 글로벌 속성 새롭게 등장한 트렌드 "시맨틱 웹(sementic web)" 시맨틱 웹은 "의미론적인 웹"으로 직역될 수 있음. 즉, 더 의미있게 웹 페이지를 설계하는 트랜드 그러면서 시맨틱 태그를 사용하기 시작했음. (태그의 이름만으로 태그의 용도나 역할에 대한 의미가 명확한 태그) 1) header 태그 : 웹 페이지에서 헤더 영역을 구분해주는 데에 사용 : 웹 사이트의 최상단이나 좌측에 위치. 로고, 검색, 메뉴와 같은 요소들을 포함. 헤더 구성 2) nav 태그 : 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분하는데에 사용. 3) section 태그 : 웹 페이지에서 논리적으로 관련있는 내용 영역을 구분할 때 사용 -> 내용의 제목을 나타내는 hn 태그 중 하나를 포함. 4) article.. 2023. 7. 9. [HTML] 멀티미디어 설정하기 오디오와 비디오를 HTML로 구현하자 audio 태그 항상 src 속성과 함께 사용하며, 오디오 컨트롤 패털이 웹 브라우저에 노출되도록 controls 속성을 설정해야 함! 실제로 가지고 있는 음원을 가지고 audio 태그로 컨트롤 패널을 설치해봤다. 더보기 옵션에 다운로드와 재생속도까지 있음을 확인했다. 그리고 웹 브라우저만다 지원하는 오디오 파일 포멧이 다르기 때문에 코드를 작성하기 전에 지원여부를 확인해야 한다. 파일 포멧 미디어 타입 MP3 audio/mpeg WAV audio/wav OGG audio/ogg video 태그 controls는 사용자가 제어할 수 있는 컨트롤패널이다. 실제 가지고 있는 영상을 넣어 웹 사이트에서 확인해봤다. 잘 나옴을 확인했다. 비디오 역시 웹 브라우저마다 지원하는.. 2023. 7. 9. [HTML] 표 만들기 표(table)은 웹 페이지에서 흔하게 볼 수 있는 2차원 격자 형태로 구성된 데이터. 행(row), 열(col), 셀(cell) 가로 성분 / 세로 성분 / 행과 열이 만나는 것. table 태그 표를 생성할 때는 table 태그 사용. 표 관련 태그는 모드 table 태그 안에서 사용함! caption 태그 표를 생성할 때, 웹 접근성을 향상하는 방법의 하나로, 표 제목을 지정. 표 제목은 caption 태그로 지정하므로, 표를 만들 때는 반드시 caption 태그를 사용해야한다. 표 제목 tr 태그 (table row) tr태그는 표에서 하나의 행을 생성한다. 여러개를 만드려면 tr 태그를 여러번 사용하면 된다. th 태그 (table header) 표에서 제목을 나타내는 열을 생성할 때 사용한다... 2023. 7. 9. [HTML] 폼(form) 태그 다루기 폼 (form) 이란? : HTML에서 사용자와 상호작용해서 정보를 입력받고 서버로 전송하기 위한 양식. form 태그 : 폼 양식을 의미하는 태그 -> 폼을 구성하는 태그는 모두 form 태그 안에 작성. action 속성 : 폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL 주소를 작성. method 속성 : 입력받은 값을 서버에 전송할 때 송신방식을 작성 input 태그 : 입력받는 요소를 생성할 때 사용 속성 : type(필수) , name(선택), value(선택) type 속성 : 입력된 값에 따라 상호작용 요소의 종류 결정. 속성값 설명 text 한 줄 텍스 password tel number 숫자만 입력할 수 있는 요소를 생성한다. url search 검색용 텍스트를 .. 2023. 7. 9. [HTML] HTML (필수) 태그 모음 ※ 텍스트 작성하기 (텍스트의 목적에 따라서 태그가 달라진닷!) 1. hn 태그 : 제목이나 주제를 나타내는 텍스트 표현시 사용 h1~h6이 있으며, h는 heading을 의미. n은 중요도. 1이 가장 중요함!! 중요도가 떨어질수록, 점점 굵기가 가늘어지고, 크기가 작아짐. ++ hn 태그로 작성된 텍스트는 검색엔진에서 키워드로 인식 ++ (SEO - Search Engine Optimization, 검색 엔진 최적화를 위해 핵심 키워드를 제목에 선택하자!) (SEO는 검색엔진에서 상위에 랭크될 수 있도록 검색엔진에 친화적으로 마크업을 작성하는 것. markup - 문서구조) (검색엔진은 h1부터 h6까지 단계적으로 검색하므로, 중간에 하나를 뺴먹거나 하면 그 뒤는 검색이 안되므로, 단계적으로 사용 필.. 2023. 7. 9. 이전 1 2 3 다음
