HTML & CSS (8) 썸네일형 리스트형 [211021] css 실습 2 (상단 메뉴, hover) # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter An item A second item A third item An item A second item A third item An item A second item A third item Featured Special title treatment With supporting text below as a natural lead-in to additional content Go somewhere An item A second item A third item Feature Special title treatment With supporting text belo.. [211020] CSS 실습 [example1.html] # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter An item A second item A third item An item A second item A third item An item A second item A third item [ch04_1.css] table { border-collapse: collapse; width: 100%; } td, th { border-bottom: 1px solid #e6e6e6; text-align: left; padding: 0.5em; } thead { border-bottom: 2px solid black; } /* table.. [211019~20] CSS 텍스트 & 색상 & 레이아웃 스타일 기본 속성 ▶ CSS의 단위 구성 구 분 단위 내용 상대 크기 em 부모 요소의 크기가 기준 (상대 크기) 배수를 의미, 1배=1em=100%, 1.5배= 1.5em=150%와 같음 rem 최상위의 부모 요소(브라우저)의 크기 기준으로 배수 % 기본 설정된 크기에서 상대적으로 크기 설정 초기설정 100% 절대 크기 px 기본 지정된 크기 pt 텍스트 스타일 ▶ 글꼴 속성 ▷ font-family 폰트의 글꼴을 설정해주는 속성으로 글꼴1이 없으면 글꼴2, 글꼴3으로 선택되어 설정됨, 다 없으면 브라우저 기본 글꼴 적용 사용자가 사용하는 운영체제마다 설치된 글꼴의 종류가 다양하기 때문에 지원하지 않는 글꼴이 있는 경우 다음 글꼴로 브라우저 화면에 표시하기 위해 사용 선택자{font-family: 글꼴1[, .. [211018] CSS 적용, CSS 선택자 ▶ CSS 적용 내부 스타일 시트, 외부 스타일 시트, 인라인 스타일 시트 인라인 스타일 내부 스타일 외부 스타일 새로운 태그 작성 1 새로운 태그 작성 2 새로운 태그 작성 3 h1{ color: lightcoral; } h2{ color: lightseagreen; } h3{ color: lightblue; } ▶ CSS 선택자 전체 선택자 * 태그 선택자 태그(h1, p, li 등) 아이디 선택자 #아이디명 클래스 선택자 .클래스명 후손 선택자 선택자 선택자 자손 선택자 선택자 > 선택자 속성 선택자 선택자[속성=값] / 선택자[속성~=값] 선택자[속성|=값] / 선택자[속성^=값] 선택자[속성$=값] / 선택자[속성*=값] 동위 선택자 선택자 + 선택자 / 선택자 ~ 선택자 제목 1 제목 2 제목.. [211015] 폼 관련 태그 (Input) 폼 관련 태그 ▶ 사용자가 입력한 data를 보내는 방식과 처리할 프로그램을 정하는 태그 ▷ 속성 method get : URL창에 데이터를 보내는 방식 data크기에 제한이 있음(256~4096byte) data를 볼 수 있음 post : http request에 data를 넣어 보내는 방식 data크기에 제한이 없음 data를 볼 수 없음 name 태그의 고유 이름 지정, 을 구분하기 위해 사용 action 데이터를 처리 할 프로그램(페이지)을 지정 target action속성의 프로그램(페이지)를 어떻게 열지 지정 autocomplete 이전 입력내용 출력하는 기능 생략하면 자동으로 출력(default : on) method(get/post) 차이 GET 전송 POST 전송 http://localh.. [211014] 표 & 영역 & 멀티미디어 & 하이퍼링크 태그 표 관련 태그 ▶ 웹 문서에서 자료를 정리할 때 주로 사용 행과 열로 이루어져 있고 행과 열이 만나는 지점을 셀이라고 함 tr는 행 (table row) td는 sell을 만들기 위함 내용 내용 * 1행 2열 테이블 작성 ▶ 추가 관련 태그 열에 대한 제목을 표시하는 태그 중앙 정렬 및 굵게 표시 됨 테이블의 제목이나 내용을 추가하는 태그 다른 태그를 이용하여 텍스트를 꾸밀 수 있음 기본 위치는 테이블 위 중앙에 배치됨 태그로 감싸서 사용하며 과 비슷한 기능 테이블 앞에 하고 싶을 시 전에 기술 테이블 뒤에 하고 싶을 시 후에 기술 태그 설명에 주로 사용 ▶ 테이블 속성 ▷ border 태그의 속성으로 표의 테두리 두께 지정 ▷ rowspan과 colspan 태그의 속성으로 rowspan은 지정한 수만큼.. [211013] HEAD & 글자 태그, 목록 태그 HEAD ▶ 헤더 내부에서 사용하는 태그로 메타 데이터로 html문서가 가지고 있는 유용한 정보를 담아두는 곳, 문서 정보를 검색 엔진에 전달 ex. ▶ 페이지 제목을 나타내는 태그 ex. 페이지 이름 ▶ 문서를 외부의 문서와 연결하기 위해 사용 CSS파일이나 웹 폰트 사용 시 주로 연결 link는 시작 태그만 있다. ex. href 연결한 파일의 경로 지정 rel 링크가 형성하는 관계 지정 media 연결문서가 표시될 장치 또는 미디어 유형 type (연결될 문서의) MIME 타입 지정 icon 적용, 경로 줄이기 테스트 cf. MIME 타입 상 jpg 이미지 파일은 사용할 수 없다. (png, jpeg, gif 등 지원) ▶ 태그의 스타일을 지정해주는 태그로 CSS속성을 HTML내에 직접 쓸 때 사용.. [211012] 웹 통신 기초 ▶ 웹(WEB) 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간 인터넷의 통신망 위에서 작동하는 서비스 ▶ 웹 특징 HTTP(Hyper Text Transfer Protocol) 사용 HTML(Hyper Text Markup Language)로 작성된 문서 연결 텍스트, 그래픽, 오디오, 비디오, 프로그램 파일 등 멀티미디어 서비스 제공 ▷ 반응형 웹 웹 서버에서 제공되는 정보가 다양한 기기에 맞춰 제공되는 환경 ▶ HTML 웹에서 정보를 표현할 목적으로 만든 마크업 언어(Hyper Text Markup Language) 웹 페이지를 작성하기 위해 사용되는 언어로 웹 브라우저에게 보일 문자열과 이를 감싸는 일종의 해석 기호인 태그들로 이루어짐 정보(문서) ex) 텍스트, 이미지, 멀티.. 이전 1 다음
