선택자를 어떻게 조합하여 사용할 수 있을까? 그룹 선택자 --여러 선택자를 정의하여 하나로 그룹을 지을 때 사용된다.여러 선택자를 콤마(,)를 이용하여 구분한다. 기본 형식선택자1, 선택자2, ... 선택자n{ /* CSS 코드 */ } 예시 코드p, #title, .red{ color:red;}p 태그, id 속성 값이 title인 태그, class 속성 값이 red인 태그(요소) 모두 글자 색상을 빨간색으로 스타일한다.-- 자식 선택자 --부모 요소의 하위에 있는 자식 요소에 스타일을 적용할 때 사용되며">" 기호를 통해 부모와 자식을 구분한다. 기본 형식부모 선택자 > 자식 선택자 { /* CSS 코드 */ } 예시 코드.box > p { color:red;}class 속성의 ..
기본 선택자를 정의하는 방법은 무엇이 있을까? 전체 선택자 --전체 선택자를 사용하는 방법은HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법으로"html", "head", "title", "style", "body" 태그 등 모든 요소를 선택자로 정의한다. 기본 형식*{ /* CSS 코드 */} 예시 코드 제목 내용 -- 특정 태그 선택자 --HTML의 특정 태그를 지정하여 선택자로 정의하는 방법으로특정 태그명과 일치한 모든 요소를 한 번에 선택하여 CSS를 적용한다. 기본 형식태그명{ /* CSS 코드 */} 태그 선택자 p태그에 작성한 글입니다. p태그에 작성한 글입니다.2-- 아이디 선택자 --HTML 태그에서는 "id 속성"을 사용할 수 있는데해당..
CSS는 어떤 식으로 작성할까? 문법 형식 --CSS의 문법은 크게 "선택자"와 "선언부"로 구분된다. 선택자 : CSS스타일을 적용할 HTML 태그(요소)를 선택하는 영역선언부 : "선택자"에서 선택한 태그에 적용할 스타일을 작성하는 영역 (중괄호 사용)"선언부"에 작성하는 스타일은 반드시 "속성"과 "값"을 한 쌍으로 작성해야 하며,값 뒤에는 세미콜론(;)을 넣어야 하며, 여러 스타일을 연속하여 작성 또한 가능하다. 예시 코드h1{ font-size: 24px; color: red;}해당 코드는h1 태그에 사용된 텍스트 크기를 24px, 색상은 빨간색으로 지정하는 코드다.-- 주석 --CSS에서도 주석을 담을 수 있다. 기본 형식/* 주석 내용 */자바처럼 "//"는 ..
태그에 공통으로 사용할 수 있는 태그는 무엇이 있을까? 글로벌 속성 --글로벌 속성은태그 종류에 상관없이 모든 태그에서 공통으로 사용할 수 있는 속성을 의미한다. -- class 속성 --요소에 클래스명을 지정할 때 사용하며해당 클래스명은 CSS에서 클래스 선택자로 활용하고, 같은 클래스명은 여러 요소가 중복하여 가질 수 있다. 기본 형식 . . . -- id 속성 --요소에 아이디를 지정할 때 사용되며아이디는 CSS에서 아이디 선택자로 활용하며, 중복된 값은 사용할 수 없다. 기본 형식 . . . -- style 속성 --CSS 코드를 인라인으로 작성할 때 사용된다.-- title 속성 --요소에 추가 정보를 넣을 때 사용된다.(요소에 마우스를 올리면 툴팁으로 표시된다.)..
웹 페이지는 어떻게 구조를 설계할 수 있을까? 시맨틱 태그 (Semantic Tag) --시맨틱(Semantic)은 사전적으로 "의미론적"이라는 뜻으로시맨틱 웹은 더 의미 있게 웹페이지를 설계하는 트렌드라고 볼 수 있다. 이러한 트렌드에 맞춰 시맨틱 태그를 사용한다. 시맨틱 태그는HTML5에서 도입된 태그들로, 콘텐츠의 의미와 역할을 명확하게 설명하는 태그로태그의 이름만으로 "태그"와 "용도", "역할"에 대한 의미가 명확한 태그를 의미하고사람뿐만 아니라 검색 엔진과 스크린 리더도 콘텐츠 구조를 쉽게 이해할 수 있어가독성과 접근성이 향상되고, 검색 엔진 최적화에도 유리하다. HTML5 이전에는대표적으로 "table 태그", "form 태그", "a 태그" 등을 시맨틱 태그에 속했고"div 태그"..
미디어에 관련된 태그는 무엇이 있을까? audio 태그 --audio 태그는음성에 대한 미디어를 나타내는 태그로항상 "src 속성"과 함께 사용하여 "src 속성"에 오디오 파일의 경로를 정의한다.그리고 오디오 컨트롤러 패널이 웹 브라우저에 노출될 수 있도록 "controls 속성"을 추가한다. 기본 형식 예시 코드-- video 태그 --video 태그는비디오 요소를 나타낼 때 사용된다.이 또한 "audio 태그"처럼 "src 속성"과 "controls 속성"을 사용할 수 있다. 기본 형식 예시 코드-- source 태그 --source 태그는"audio 태그"와 "video 태그"에서 리소스(파일)의 경로와 미디어 타입을 명시하는 데 사용된다. 기본 형식 --
표에 관련된 태그는 무엇이 있을까? table 태그 & caption 태그 & tr, th, td 태그 --table 태그는표를 생성할 때 사용하며, 표와 관련된 태그는 모두 table 태그 안에서 사용된다. 기본 형식 caption 태그는표를 생성할 때 웹 접근성을 향상시키는 방법 중 하나로, 해당 테이블(표)의 제목을 정의한다.이때 해당 제목은 표를 기준으로 가운데 정렬된다.(caption 태그를 사용할 때는 table 태그 안에서 첫 번째로 작성해야 한다.) 기본 형식 표 제목 tr 태그는표에서 행을 생성하며, 여러 개 생성도 가능하다. 기본 형식 th 태그와 td 태그는표에서 열을 생성할 때 사용하며 "th 태그"는 표에서 제목을, "td 태그"는 표에서 일반적인 데이터를 ..
상호작용하기 위한 태그는 무엇이 있을까? form 태그 --form태그는폼 양식을 의미하는 태그로폼을 구성하는 태그는 모두 from 태그 안에 작성해야 한다. 폼(from)은 HTML에서 사용자와 상호작용을 통해 정보를 입력받고 서버로 전송하기 위한 양식을 의미한다. 기본 형식action 속성폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL 주소를 적는다.method 속성입력받은 값을 서버에 전송할 때 송신 방식을 작성한다.속성 값으로는 "get" 또는 "post"를 사용할 수 있다. actions 속성과 method 속성을 같이 사용할 수 있으며해당 속성들은 서버에서 처리하므로 서버 영역 개발자가 작성하거나 알려준다.-- input 태그 --input 태그는아이디나 ..
