웹 페이지에 스타일시트를 적용하는 3가지 방법 1. inline css (줄 내부 css) - HTML style attribute를 사용하는 방식 - 적용 우선 순위가 가장 높다. - style 속성의 값은 css 문법이다. 2. internal css (내부 css) - 페이지 내부의 style 태그를 사용하는 방식 - 더 나중에 나온 스타일이 우선 순위를 갖는다. 3. external css (외부 css) - 외부의 css 파일을 사용하는 방식 - 태그를 사용해 외부의 css를 불러와서 사용한다. - 더 나중에 나온 스타일이 우선 순위를 갖는다. # 웹 페이지에 스타일시트를 적용하는 3가지 방법 1. inline css (줄 내부 css) - HTML st..
기본 CSS 구조 선택자(Selector) { 속성(property): 값(property value); color: red; background-color: blue; } 선택자(Selector) - #id : 해당 ID속성을 지닌 요소를 선택한다. (id 속성은 해당 웹페이지 내에서 유일한 값이어야 한다.) - .class : 해당 class 속성을 지닌 요소를 모두 선택한다. (일반적으로 class 속성을 여러 요소에 같은 이름으로 존재한다.) - * : 모든 요소 선택 - html : 모든 요소 선택 - 공백 : 모든 자손 요소 선택 - > : 자식 요소 선택 - , : 여러개의 선택자를 사용할 때 # 선택자(Selector) CSS에서 원하는 요소를 선택하기 위한 것 tagname : 해당 HT..
CSS란? - CSS는 해당 웹 페이지의 스타일(디자인)을 담당한다. - CSS는 웹 브라우저에게 해당 페이지의 요소가 어떤 모습으로 사용자에게 보여져야하는 가를 정의해놓은 목록이다. - CSS를 보고 웹 브라우저들이 해당 요소를 화면에 그려준다. - 스타일 시트를 통해 모든 요소의 디자인을 원하는대로 수정할 수 있으므로 HTML의 기본 디자인 설정은 거의 쓸모가 없다. - HTML은 결국 해당 태그가 가지고 있는 의미만 남아있게 된다. css 주석 /* CSS 주석 */ /* 한 줄 주석은 따로 없다. */ # CSS (Cascading Style Sheet) CSS는 해당 웹 페이지의 스타일(디자인)을 담당한다. CSS는 웹 브라우저에게 해당 페이지의 요소가 어떤 모습으로 사용자에게 보여져야하는 가를..
ul - 순서 없는 리스트, unordered list - type 속성 : disc(default), square, circle, none ol - 순서 있는 리스트, ordered list - type 속성 : 1(default), a, A, i, I - start 속성 : 값을 주면 해당 숫자부터 시작 dl - 설명 있는 리스트, description list # ul : 순서 없는 리스트, unordered list type 속성 : disc(default), square, circle, none 콜라 웰치스 환타 # ol : 순서 있는 리스트, ordered list type 속성 : 1(default), a, A, i, I start 속성 : 값을 주면 해당 숫자부터 시작 콜라 사이다 웰치스 ..
웹 페이지에 표 출력하기 - : 표 전체의 범위를 의미하는 태그 - : table row, 표의 한 줄을 의미하는 태그 - : table header, 해당 줄에 제목 칸을 추가하는 태그 - : table data, 해당 줄에 일반 칸을 추가하는 태그 # 웹 페이지에 표 출력하기 - : 표 전체의 범위를 의미하는 태그 - : table row, 표의 한 줄을 의미하는 태그 - : table header, 해당 줄에 제목 칸을 추가하는 태그 - : table data, 해당 줄에 일반 칸을 추가하는 태그 국어 영어 수학 총합 10 20 30 60 회원이름 받는곳 전화번호 김철수 서울시 무슨구 무슨동 02-123-1234 010-1234-1234 박철수 경기도 구리시..
웹 페이지에 이미지 넣기 - 이미지를 넣을 때는 img 태그를 사용한다. - src : 원하는 이미지의 경로 (로컬 또는 외부) - alt : 해당 이미지에 대한 설명 (웹 표준 필수 속성) - width : 이미지의 너비 조절 - height : 이미지의 높이 조절 - alt 속성은 쓸모없어 보이지만 Screen Reader 프로그램들이 갖다 쓰는 속성이므로 채워놓아야 한다.
다른 페이지로 이동하기 위한 링크걸기 - a태그를 이용하기 - 자바스크립트 이용하기 a(anchor) tag 네이버로 가기 - a 태그는 전체 글의 일부분에만 링크를 걸 수 있도록 되어있는 태그다. (영역을 따로 설정하는 태그가 아니다.) - href 속성에는 가고싶은 목적지의 url을 설정해 놓는다. - 절대경로와 상대경로를 모두 사용할 수 있다. JavaScript로 링크 걸기 - location : 현재 브라우저가 보고 있는 페이지 위치에 대한 정보 인스턴스 - href : 현재 브라우저가 보고 있는 페이지의 경로 자세한 정보는 여기에서 확인하세요! URL 경로의 종류 - naver.com - ./naver.com - /naver.com : 도메인부터 시작되는 경로 - //naver.com : 프로..
