너구리의 IT일기

[CSS란?] CSS 또는 캐스케이딩 스타일 시트(Cascading Style Sheet)는 마크업 언어가 실제로 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있음. CSS는 W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높은 언어임. CSS는 웹 사이트에서 사용되는 스타일을 지정하기 위한 언어로, 스타일은 웹의 독창적인 개념이 아니라 웹 이전부터 워드프로세스 등에 사용했던 개념임 . 1996년 W3C의 주도하에 첫 번째 CSS 버전인 CSS Level 1이 발표. 1998년에 CSS Level 2가 등장하면서 대부분의 웹 브라우저들이 CSS Level 2를 지원하기 시작 그 후 CSS Level 2의 버그를 수정한 CSS Level 2.1..

연결 선택자 •연결 선택자 : 선택자와 선택자를 연결해 적용 대상을 제한하는 선택자. •컴비네이션 선택자(combination selector) 또는 ‘조합 선택자’라고도 함 ▶하위 선택자(descendant selector) •부모 요소에 포함된 모든 하위 요소에 스타일이 적용된다 •자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용 •하위 선택자를 정의할 때는 상위 요소와 하위 요소를 나란히 쓴다. ▶자식 선택자(child selector) •자식 요소에 스타일을 적용하는 선택자 •두 요소 사이에 ‘>(부등호)’를 표시해 부모 요소와 자식 요소를 구분 ▶인접 형제 선택자(adjacent selector) •같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일 적용..

배경색과 배경 범위,이미지 지정하기 ▶background-color 속성 •웹 문서의 요소에 배경색 지정 •16진수나 rgb 값, rgba 값 또는 색상 이름 사용 •배경색은 상속되지 않는다 ▶background-clip 속성 배경을 어디까지 적용할지 지정 ▶background-image 속성 배경 이미지 파일 경로 지정 ▶background-repeat 속성 배경 이미지 반복 여부 및 반복 방향 지정 ▶background-position 속성 배경 이미지를 반복하지 않을 경우, 배경 이미지를 표시할 위치 지정 ① 백분율 : 배경 이미지의 가로 위치와 세로 위치를 %로 나타냄. 예) background-postion: 0% 0% , background-position : 30% 60% ② 길이 길이 : ..

CSS와 박스 모델 ▶블록 레벨 요소 •요소를 삽입했을 때 혼자 한 줄을 차지하는 요소 •요소의 너비가 100% 예) , 등 ▶인라인 레벨 요소 •줄을 차지하지 않는 요소 •화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 예) , 등 •글자처럼 취급 ▶박스 모델 실제 콘텐츠 영역, 패딩(padding), 박스의 테두리(border), 그리고 마진(margin) 등의 요소로 구성됨. 태두리를 기준으로 안쪽 바깥쪽이 나뉘어짐 ▶개발자 도구 창에서 박스 모델 확인 가능 ①웹 브라우저에서 웹 문서 열기 ②박스 모델 확인할 부분을 마우스 오른쪽 버튼으로 누른 뒤 [검사] 선택 ③개발자 도구 창 위에서 [Computed] 탭 클릭 ④해당 부분의 박스 모델이 그림으로 표시됨 ▶w..

글꼴 관련 스타일 ▶font-family 속성 ▶웹 문서에서 사용할 글꼴 지정 • 태그를 비롯해 태그나 태그처럼 텍스트를 사용하는 요소들에서 사용 •지정한 글꼴이 없을 경우에 대비해 두 번째, 세 번째 글꼴까지 지정. •둘 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 글꼴 구분 • 태그 스타일에서 한 번 정의하면 문서 전체에 적용되고 문서 안의 모든 자식 요소에 계속 같은 글꼴이 사용됨. ▶font-size 속성 ▶키워드를 사용해 글자 크기 지정하기 ▶단위를 사용해 글자 크기 지정하기 font-style 속성 글자를 이탤릭체로 표시하는 속성 font-weight 속성 글자 굵기를 조절하는 속성 웹 폰트 사용하기 ▶웹 폰트란 •웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 ..

웹 문서에 디자인 입히기 ▶왜 스타일을 사용할까 •HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성 > 스타일을 사용하면 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다 •다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다 > 반응형 웹 디자인 스타일과 스타일 시트 ▶스타일 형식 알아보기 속성1 : 속성값1; 식의 형식을 사용한다. ▶스타일 규칙 작성 방법 •중괄호( { } ) 사이에 스타일 규칙 나열 •규칙이 여러 개일 경우 세미콜론(;)으로 구분 ▶스타일 주석 •/*와 */ 사이에 주석 내용 입력 •한 줄 또는 여러 줄을 입력 가능 ▶스타일 시트 ▶브라우저 기본 스타일 •브라우저에서 기본으로 적용하는 스타일 •웹 문서에서 아무 스타일도 적용하지 않고 HTML만 사용..

폼 삽입하기 ▶웹에서 만나는 폼 •사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼(form) •폼과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들 •이런 작업은 모두 데이터베이스를 기반으로 한다. •아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 HTML 태그 •폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP 같은 서버 프로그래밍 이용 ▶ 태그 •폼을 만드는 기본 태그. 과 사이에 여러 폼 요소 삽입 •기본형 여러 폼 요소 ▶ 태그의 속성 /* 여러 가지 폼 요소 */ >>폼에 내용을 입력하고 서버로 전송했을 때 서버에 있는 register.php를 실행한다 ▶ 태그 •폼 요소를 그룹으로 묶는 태그 •기본형 ~ ▶ 태그 •그룹으로 묶는 구역에..

택스트태그 알아보기 ▶제목 제목을 표시할 때 사용하는 태그 기본형 : 제목 크기 : h1 > h2 > h3 > h4 > h5 > h6 ▶텍스트 단락 입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐 기본형 : 텍스트 레드향 껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다. 비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다. 레드향 샐러드 레시피 상품 구성 ▶줄바꾸기 기본형 : 줄을 바꿀 위치에 태그를 사용. 닫는 태그가 없음 ▶인용문 기본형 : 인용 내용 다른 텍스트보다 안으로 들여 써짐. 레드향 껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반..

브라우저에게 정보를 주는 태그 •문서 관련 정보 입력, 웹 브라우저 화면에는 보이지 않음. •문서에서 사용할 외부 파일 링크 문자 세트 등 문서 정보가 들어 있는 태그 한글로 된 내용을 표시하기 위해서 UTF-8 문자 세트를 사용 이외에도 다양한 문서 정보를 지정 문서 제목을 나타내는 태그 웹 브라우저에 내용을 표시하는 태그 •실제 브라우저에 표시될 내용 입력 •대부분의 태그가 태그와 태그 사이에서 사용하는 태그들 프런트엔드 웹 개발 HTML CSS 자바스크립트 웹 문서 구조를 만드는 시맨틱 태그 시맨틱(semantic) : 의미론적인, 의미가 통하는 이름만 봐도 의미를 알 수 있는 HTML 태그 왜 사용할까? •화면 낭독기 같은 보조 기기에서 사이트의 구조를 이해 •할 수 있다 •문서 구조가 정확히 나..

https://code.visualstudio.com Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com Visual Stuido Code 기본 설정 확장 기능에서 한글 언어팩 설치 - Korean Language Pack for Visual Studio..