본문 바로가기
반응형

전체 글 보기299

[CSS] 02-3 문단 스타일 1. direction 속성 – 글자 쓰기 방향 지정하기 ① 텍스트를 어느 방향부터 쓰기 시작해 화면에 표시할지를 결정 ② 기본형 : direction : ltl | rtl ③ 사용 가능한 속성 값 2. text-align 속성 – 텍스트 정렬하기 ① 문단의 텍스트 정렬 방법 지정 ② 기본형 : text-align : start | end | left | right | center | justify | match-parent ③ 사용 가능한 속성 값 Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida.. 2021. 9. 5.
[CSS]02-2 텍스트 스타일 1. color 속성 – 글자 색 지정하기 ① 글자 색상 지정할 때 사용 ② 16진수 값, rgb값, hsl 값, 색상 이름으로 표시 가능 ③ 기본형 : color : 세계 3대 미항 세계 3대 미항 시드니(Sydney), 호주 리우데자네이루(Rio de Janeiro), 브라질 나폴리(Naples), 이탈리아 2. text-decoration 속성 – 텍스트에 줄 표시하기/없애기 ① 텍스트에 밑줄을 긋거나 취소 선을 표시할 때 사용 ② 링크 텍스트의 밑줄 없앨 때도 사용 ③ 기본형 : text-decoration : none | underline | overline | line-through ④ 사용 가능한 속성 값 세계 3대 미항 세계 3대 미항 시드니(Sydney), 호주 리우데자네이루(Rio de.. 2021. 9. 5.
[CSS] 02-1 글꼴 관련 스타일 1. font-family 속성 – 글꼴 지정하기 ① 기본형 : body { font-family : "맑은 고딕", 돋움, 굴림 } /* 맑은 고딕이 없으면 돋움으로, 돋움이 없으면 굴림으로 적용*/ ② 웹 문서에서 사용할 글꼴 지정 ③ 를 비롯해 나 ~ 처럼 텍스트를 사용하는 태그에서 사용 ④ 웹 문서에서 글꼴을 지정할시 한 가지 글꼴만 지정하기도 하지만 지정한 글꼴이 없을 경우를 대비하여 두세 번째 글꼴까지 지정, 둘 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 글꼴 구분 ⑤ font-family 속성은 상속되기 때문에 스타일에서 정의하면 문서 전체에 적용되고 자식 요소에 계속 같은 글꼴이 사용됨 ⑥ 일부 태그에서 다른 글꼴을 사용하고 싶을 때는 태그 선택자, 클래스 선택자를 이용해 해당 요소에 다.. 2021. 9. 5.
[CSS] 01-5 CSS3와 CSS 모듈 1. CSS3란? ① CSS가 스타일 시트의 기본이 되면서 CSS1과 CSS2를 거쳐 스타일 시트가 많이 알려졌고 널리 사용되고 있음 ② HTML5가 개발되면서 CSS3 기술도 함께 개발되었으며 CSS2보다 정교하고 화려한 화면을 구성할 수 있고 애니메이션까지 지원 가능 ③ CSS2 규약 안에는 스타일과 관련된 것들이 한꺼번에 담겨 있어서 크고 복잡해하여 한 번에 업데이트하기 쉽지 않음 ④ CSS3부터는 배경이나 글꼴, 박스 모델 등 수십 개 기능에 대한 규약을 주제별로 따로 생성함. 이것을 CSS 모듈이라함 ⑤ CSS 유효성 검사 https://jigsaw.w3.org/css-validator/ ⑥ CSS 관련 뉴스 및 CSS 규약 확인 https://www.w3.org/Style/CSS/ 2. CSS.. 2021. 9. 5.
[CSS] 01-4 캐스캐이딩 스타일 시트 (CSS : Cascading Style Sheet) 1. 캐스캐이딩(Cascading)의 의미 ① 캐스캐이딩(Cascading)은 위에서 아래로 흐른다는 의미 ② ‘캐스캐이딩’은 선택자에 적용된 많은 스타일 중에 어떤 스타일을 나타낼지를 결정하는 것을 뜻함 ③ 스타일이 동시에 적용될 때 스타일 간 충돌을 막기 위한 방법이 위에서 아래로 흐르며 적용되는 방법 ④ 위 방법에는 두 가지 원칙이 존재 - 스타일 우선순위 : 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용됨 - 스타일 상속 : 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달 2. 스타일 우선순위 ① 스타일 우선순위는 캐스캐이딩에서 가장 중요한 개념 ② 우선순위는 다음의 세 가지 개념에 따라 지정됨. 중요.. 2021. 9. 5.
[CSS] 01-3 주요 선택자 1. 전체 선택자 – 모든 요소에 스타일 적용하기 ① 정의한 스타일을 모든 요소에 적용할 때 사용 ② 전체 선택자로는 *(별표)로 사용 ③ * {속성:속성 값; 속성:속성 값...} ④ 전체 선택자는 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용 브라우저의 기본 마진 값과 패딩 값 2. 태그 선택자 – 특정 태그를 사용한 요소에 스타일 적용하기 ① 특정 태그에 스타일을 적용하는 데 사용 ② 전체 선택자 다음으로 많은 요소들에 스타일 적용 가능 ③ 태그 { 스타일 } ※ 태그와 요소의 차이점 ① 기본형 : 텍스트 단락을 지정하는 p 태그 ② 위 소스에서 , 가 태그이고 ‘텍스트 단락을 지정하는 p 태그‘ 부분이 p 요소 ③ 따라서 스타일은 태그에 적용되는 것이 아니고 태그 안에 요소에 적용.. 2021. 9. 5.
[CSS] 01-2. 스타일과 스타일 시트 1. 스타일과 스타일 시트 ① 스타일(style) : HTML 문서에서 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용 ② 스타일 시트(style sheet) : 스타일을 관리하기 쉽도록 한 곳에 모아놓는 것 2. 왜 스타일을 사용할까? ① 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있습니다. - HTML로는 웹 문서의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구상하는 것이 웹 표준의 시작 - 웹 문서의 내용과 디자인을 독립적으로 수정 가능 - CSS Zen Garden 사이트 참고 CSS Zen Garden: The Beauty of CSS Design CSS Zen Garden: The Beauty of CSS Design So What is This About.. 2021. 9. 5.
[CSS] 01-1 CSS 기초 1. CSS란 ① CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념이다. ② HTML이 웹 문서에 뼈대를 담당, CSS는 웹 문서의 디자인(살을 붙이는) 요소를 담당 ③ : 스타일 시트를 정의하는 태그 ④ * { 속성 } : 문서 전체에 스타일을 적용하는 전체 선택자 ⑤ . 스타일 이름 { 속성 } : class 속성으로 묶은 특정 부분에만 스타일을 적용하는 class 선택자 ⑥ # 스타일 이름 { 속성 } : id 속성으로 묶은 부분에만 스타일을 적용하는 id 선택자 ⑦ 이름1, 이름2, … { 속성 } : 여러 항목에 같은 스타일을 적용하는 그룹 선택자 2021. 9. 5.
[HTML] 04-5 기타 다양한 폼 요소들 1. 태그 – 버튼 넣기 ① 를 사용해도 , 과 동일한 기능의 버튼 추가 가능 ② 에서 사용 가능한 type 전송하기 2. 태그 – 계산 결과 ① 입력하는 값이 계산 결과라는 것을 브라우저에 전달 ② 으로 묶인 값은 일반 텍스트가 아니고 계산의 결과 값으로 인식 + = 3. 태그 – 진행 상태 보여주기 ① 작업 진행 상태를 표시할 때 사용 ② 작업 시작을 0, 최종 완료를 최대 값(max)으로 지정하여 진척도를 숫자(value)로 표현 ③ 에서 사용 가능한 속성 10초 남음 진행률 30% 다운로드 시작 4. 태그 – 값이 차지하는 크기 표시하기 ① 전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용 ② 디스크 사용량이라던지 투표율 같은 지정된 범위 내에서 해당 값이 어느 정도 차지하는지 표현 ③ 에서 .. 2021. 9. 5.
[HTML] 04-4 여러 데이터 나열해 보여 주기 1. , , 태그 – 드롭다운 목록 만들기 ① 사용자가 직접 내용을 입력하지 않고 여러가지 옵션 중 선택할 때 드롭다운 목록 사용 ② 드롭다운 목록은 와 를 이용해 표시 ③ : 드롭다운 목록의 시작과 끝 표시 ④ : 선택 항목 추가 ⑤ 드롭다운 목록에서 항목을 선택하고 를 submit 하면 선택된 value 값이 서버로 전달 ⑥ 내용1 내용2 내용3 ... 여름방학 특강 신청 신청자 이름 학번 학과 건축공학과 기계공학과 산업공학과 전기전자공학과 컴퓨터공학과 화학공학과 2. 태그의 속성 3. 태그의 속성 여름방학 특강 신청 신청자 이름 학번 학과 건축공학과 기계공학과 산업공학과 전기전자공학과 컴퓨터공학과 화학공학과 4. 태그 – 옵션끼리 묶기 ① 드롭다운 목록에서 항목들을 몇 가지 그룹으로 묶어서 표출할 .. 2021. 9. 5.
[HTML] 04-3 <input> 태그의 다양한 속성 1. autofocus 속성 – 입력 커서 표시하기 ① 페이지 로딩 후 바로 폼 요소 중 원하는 요소에 마우스 커서 표시 ② HTML5 이전에는 javascript 문법으로 처리했지만 HTML5에서 autofocus라는 속성으로 간단하게 구현 2. placeholder 속성 – 힌트 표시하기 ① 사용자가 텍스트를 입력할 때 도움이 되도록 적당한 힌트 내용 표시 3. readonly 속성 – 읽기 전용 필드 만들기 ① 입력란에 텍스트를 표시하고 사용자가 입력 불가능하도록 만듬 ② 읽기 전용으로 만들 때 readonly=“true“, readonly=“readonly“, readonly 로 설정. 기본 값은 false ③ 읽기 전용 해제 시에는 readonly 속성을 삭제하거나 readonly=“false”.. 2021. 9. 5.
[HTML] 04-2 사용자 입력을 위한 <input> 태그 1. 태그 입력 항목 만들기 ① 폼태그 요소 중 사용자 입력 부분은 주로 태그 사용 ② 웹에서 폼은 사용자가 입력하는 부분과 입력한 내용을 서버로 보내는 버튼 부분으로 나눔 ③ 태그로 입력할 수 있는 항목은 아이디나 비밀번호, 이메일 주소, 전화번호, 날짜, 시간, 이미지, 버튼 등 다양하고 태그의 type 속성을 이용해 지정 ③ 형태 : 2. id 속성 사용하기 ① type이 동일한 폼 요소가 여러 번 사용될 때 폼 요소를 구분하기 위해 사용 3. name 속성 사용하기 ① id 속성과 동일하게 사용됨 ① type이 동일한 폼 요소가 여러 번 사용될 때 폼 요소를 구분하기 위해 사용 4. id속성과 name속성의 차이점 ① id와 name 모두 페이지 내에서 element를 식별하기위해 사용 ② id는.. 2021. 9. 5.
[HTML] 04-1 폼 만들기 1. 웹에서 자주 만나는 폼 ① 회원가입, 로그인, 쇼핑몰의 주문화면 등 웹 사이트로 정보를 보낼 수 있는 요소들을 폼(form)이라고 함 2. 폼의 동작 방식 ① 사용자가 아이디와 비밀번호 입력 후 로그인 버튼 클릭 ② 사용자가 입력한 아이디와 비밀번호가 웹 서버로 전송 ③ 서버에서 사용자 데이터베이스를 검색해서 사용자가 전송한 아이디와 비밀번호가 서로 일치하는지 확인 후 결과를 브라우저로 리턴 ④ 일치하는 정보가 사용자 데이터베이스에 있을 경우 로그인 성공, 아니면 로그인 실패 화면으로 이동 3. 태그 – 폼 만들기 ① 은 폼을 만드는 가장 기본적인 태그 ② ~ 사이에 여러 폼 요소 관련 태그 주입 ③ 여러 폼 요소 4. 태그에서 사용하는 속성들 5. 태그 – 폼 요소에 레이블 붙이기 ① 레이블(la.. 2021. 9. 5.
[HTML] 03-3 SVG 이미지와 Modernizr 1. SVG(Scalable Vector Graphics) 파일 형식이란 ① gif, jpg/jpeg, png 파일을 확대/축소하면 이미지가 깨지는데 이런 이미지들을 비트맵 이미지(bitmap image)라고 함 ② 이미지를 확대/축소해도 원본 상태가 유지되는 이미지를 벡터 이미지(vector image)라 하고 SVG 이미지는 벡터 이미지의 한 종류 (SVG, AI, EPS 등) ③ 로고나 아이콘, 지도 또는 데이터 시각화(차트나 다이어그램) 등에 많이 사용 ex) d3.js(http://d3js.org/), Raphael.js(http://dmitrybaranovskiy.github.io/raphael/) 등 시각화 라이브러리 ④ 비주얼 스튜디오 코드에서 svg 이미지 파일 열어서 확인 SVG PNG.. 2021. 9. 5.
[HTML] 03-2 링크 만들기 1. 태그, href 속성 – 링크 만들기 ① 웹 사이트 내에서 클릭했을 때 다른 페이지로 넘어갈 때 사용 ② 형태 : 텍스트/이미지 ③ 안에서 사용할 수 있는 속성들 ④ CSS를 이용해서 텍스트 링크의 색상과 밑줄을 없앨 수 있음 텍스트 링크 만들기 네이버 이미지 링크 만들기 2. target 속성 – 새 탭에서 링크 열기 ① target 속성을 이용하면 링크를 띄울 페이지를 지정할 수 있음 텍스트 링크 만들기 네이버(현재 화면) 네이버(새 창 또는 새 탭) 3. 아이프레임과 target – 부모창에 링크 띄우기 ① 아이프레임은 프레임의 일종으로 문서 본문에 액자를 주입하는 것을 말함 ② 을 이용해 현재 문서에 다른 문서를 포함시키거나 자바스크립트를 이용해 팝업 창을 열면 현재 문서는 부모 문서가 되고.. 2021. 9. 5.
반응형

티스토리툴바