국비지원 공부 정리 96

CSS 선택자 정리 - 기본 선택자, 복합 선택자

CSS 기본 용어 정리용어 선택자(Selector)HTML 의 Style을 지정하기 위하여 HTML 테그를 선택하기 위한 수단.속성(Property)HTML 요소를 선택하고 {} 내에 속성 값을 지정하여 다양한 style을 정의함.여러 개의 프로퍼티를 연속해서 지정할 수 있으며, 세미콜론(;)으로 구분함속성은 이미 지정되어 있는 용어이며, 사용자가 임의로 정의하지 못함.값(value)해당 속성에 대하여, 키워드나 크기 단위, 또는 색상 단위로 표시되어 있는 실제 값 CSS의 기본 선택자 용어의미사용법전체 선택자(Universal Selector)모든 요소를 선택함* {    color : red;}= 전체 태그에 대해서 빨간색 글씨로 써라.태그 선택자(Type Selector)태그의 이름에 대해서 선택 ..

CSS의 참조 방식

CSS(Cascading Style Sheet)1. 웹 페이지를 디자인하기 위해 사용하는 언어 개발자 도구○ 브라우저에서 개발 편의를 위해 제공하는 도구로 F10을 누르면 활성화된다.○  현재 보고 있는 웹페이지를 구성하는 HTML, CSS, javascript를 볼 수 있다.○ 화면을 돌리면 원상태로 복구되겠지만, 화면을 수정하여 변경하는 것도 가능하다.○ 특정요소 코드 보기 및 수정 / 크기 줄이기 / 화면의 사이즈를 줄여서 반응형 확인하기. CSS의 참조 방식인라인(inline 방식) 1. 각 태그마다 스타일에 변화를 주고 싶을 때 사용2. 테그마다 스타일을 설정하는 것이기에, CSS 코드의 재사용이 불가능하다.내장 Style 1. 태그 내부에서 Style을 선언하여 사용하는 방식2. 동일한 조건..

HTML - Table, Select

5. 사용자가 실제 데이터를 입력하는 곳을 나타내는 태그 - select 태그의 모습태그의 유형사용 목적선택 폼 생성1. 어떤 내용을 선택하는 부분을 생성하는 태그속성 - Name : select 박스의 이름선택 폼의 옵션1. 실제 선택할 내용을 생성하는 태그속성● Value : 실제적으로 전달되는 값● Selected : 최초로 선택되는 값으로 설정● Disabled : 보이지만 선택할 수 없는 옵션으로 만듬option을 묶는 태그1. option을 그룹화하는 태그속성★ Label : 그룹화하는 옵션의 그룹명을 결정 6. 테이블을 생성하는 테그 - table태그의 모습 사용목적속성테이블을 생성• border : 테두리 두께 • cellspacing : 테두리 간격 사이의 너비 • cellpadding ..

HTML - 이미지, 하이퍼링크, input

3.  이미지나 하이퍼링크를 표현하는 데 사용되는 태그태그의 모습태그의 유형사용 목적이미지 테그1. 이미지를 넣을 때 사용되는 테그2. 속성 값 중 하나인 src가 여기서 사용됨3. 이미지 로드가 안될 때 표시되는 문자는 alt4. 프로그램 내 파일을 가져오거나, 인터넷 링크를 통해 이미지 표시 가능하이퍼링크1. a는 Anchor의 약어2. 속성값 href는 Hypertext Reference 의 약자, 이동할 페이지 링크3. target : 링크 된 페이지를 열었을 때, 문서가 열릴 위치를 표시★ _blank :새로운 텝에서 내용을 염★ _self : 현재 탭에서 (기본 값) 4. 사용자가 실제 데이터를 입력하는 곳을 나타내는 태그 - Input 태그의 모습태그의 유형사용 목적버튼 태그특정 함수를 수행..

HTML - 문자 구조, 디자인과 관련된 태그

1. 문자의 구조를 형성하는 태그태그의 모습태그의 유형사용 목적제목 태그1. 제목을 뜻하는 Heading의 약자, h 사용!2. 제목을 뜻하는 테그이기 때문에 자동 줄 바꿈처리 되며, 하나의 HTML 문사에 하나의 H1 테그를 권장함.3. 웹 검색 엔진이 제일 먼저 검색하는 테그본문 태그본문을 적기 위한 테그로 paragraph의 약자줄 바꿈 태그 한 줄을 그냥 비우는 테그라고 보면 됨.리스트 작성 태그1. 순서가 없는 목록을 작성 함(●이 기본값)1. 순서가 있는 목록을 작성 함(기본 값은 1, 아라비아 숫자 등 스타일 변경 됨)1. 두 테그 내부에서 내용을 작성하는 태그줄긋기 태그 수평으로 된 줄을 그어주는 태그 2. 문자를 디자인하는데 사용되는 태그태그의 모습사용 목적두껍게 강조하기 위한 태그두껍게..

HTML - 기본적인 설명

HTML(Hypertext Markup Language)1. 마크업 언어 : 테그를 이용해서 프로그램의 구조를 짜는데 사용되는 스크립트 HTML의 기본 구조HTML 문서는 기본적으로 로 시작실질적인 문서는 2번쨰 행부터 시작되며, 과 사이에 작성됨 사이에는 HTML 문서 정보를 정의하는 코드가 포함됨(제목, 저장방식, 브라우저의 크기)웹 브라우저의 출력 요소는 몸통을 뜻하는 바로 아래에 위치한다.HTML 요소(Element)는 시작 테그(Open)과 종료(Closing) 그리고 테그 사이의 내용으로 이루어짐 태그- HTML 문서의 메타 데이터와 문서를 정의하는 사용되는 테그들이 위치하는 곳- 메타 데이터 : 데이터에 대한 기본적인 출저 정보를 제공하는 데이터- 화면에 표시되는 요소는 아니지만, 그..