본문 바로가기

📁Web Developing59

III. 박스 모델 - 2. 테두리 스타일 지정하기 박스 모델의 방향 박스 모델은 상하좌우 네개의 방향이 있어서 테두리나 마진, 패등 등을 지정할 때 한거번에 똑같이 지정하거나 모두 다르게 지정할 수도 있다. 박스 모델의 방향 top, right, bottom, left가 있으며, 시계방향 순서인 이 순서를 기억해 두자. border-style : 테두리 스타일을 지정 기본값은 none이어서 테두리 색상이나 두께를 지정하더라도 화면에 표시되지 않는다. 그러므로 테두리를 그리려면 가장 먼저 테두리 스타일의 속성값을 지정해야 한다. 종류 설명 none 테두리 없음. 기본값. hidden 테두리 감춤. 표에서 border-collapse : collapse일 경우 다른 테두리도 표시되지 않음. solid 테두리를 실선으로 표시 dotted 테두리를 점선으로 표.. 2022. 6. 4.
III. 박스 모델 - 1. CSS와 박스 모델 블록 레벨 요소, 인라인 레벨 요소 박스 모델은 블록 레벨 요소인지, 인라인 레벨 요소인지에 따라 나열 방법이 달라진다. 블록 레벨 요소란 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킨다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 뜻이다. 따라서 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. 대표적인 태그로 , , 등이 있다. 인라인 레벨 요소는 한 줄을 차지하지 않는다. 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. 따라서 한 줄에 인라인 레벨 요소를 여러 개 표시할 수 있다. 인라인 레벨 요소를 만드는 태그로 , , 등이 있다. 박스 모델의 기본 구성 앞에서 배운 웹 문서의 블록 레벨 요소는 모두 박스 형태이다. 스타일 .. 2022. 6. 3.
II. 텍스트 - 5. 표 스타일 caption-side : 표 제목의 위치 정하기 표 제목은 태그를 이용해 캡션으로 표시한다. caption-side 속성을 이용해 제목을 표의 위쪽에 표시할 지, 표의 아래쪽에 표시할 지 선택할 수 있다. caption-side : top | bottom border : 표에 테두리 그리기 표 바깥 테두리와 셀 테두리를 각각 지정합니다. 다음 예제는 border속성을 이용해 바깥 테두리는 1px의 검은색 실선으로, 셀 테두리는 1px의 검은색 점선으로 표시한 것이다. 선물용과 가정용 상품 구성 용도 중량 개수 가격 선물용 3kg 11~16과 35,000원 5kg 18~26과 52,000원 가정용 3kg 11~16과 30,000원 5kg 18~26과 47,000원 border-spacing : 셀 사이의.. 2022. 6. 3.
II. 텍스트 - 4. 목록 스타일 list-style-type : 불릿 모양과 번호 스타일을 지정 순서 없는 목록의 경우 목록 앞에 다양한 불릿 모양을 넣을 수 있고, 순서 목록에서는 번호 스타일을 지정할 수 있다. 종류 설명 예시 disc 채운 원 모양 ● circle 빈 원 모양 ○ square 채운 사각형 모양 ■ decimal 1부터 시작하는 10진수 1, 2, 3, ... decimal-leading-zero 앞에 0이 붙는 10진수 01, 02, ... lower-roman 로마 숫자 소문자 i, ii, iii, ... upper-roman 로마 숫자 대문자 I, II, III, ... lower-alpha 또는 lower-latin 알파벳 소문자 a, b, c, ... upper-alpha 또는 upper-latin 알파벳 .. 2022. 6. 2.
II. 텍스트 - 3. 텍스트 관련 스타일 color : 글자색 텍스트에서 글자색을 바꿀 때 color 속성을 사용한다. 사용할 수 있는 속성값은 16진수, rgb(또는 rgba), hsl(또는 hsla) 또는 색상 이름이다. 방식 예시 16진수 #000000, #ffffff hsl / hsla 형식: hsl(색, 채도, 명도) ex: hsl(0, 100%, 50%) 형식: hsla(색, 채도, 명도, 투명도) ex: hsla(0, 100%, 50%, 0.5) 색상 이름 red, yellow, black rgb/rgba rgb(0,0,255) rgb(0,0,255,0.5) text-align : 텍스트 정렬 텍스트를 정렬하는 속성이다. 속성값은 다음과 같다 종류 설명 start 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬 end 현재 텍스트.. 2022. 6. 2.
II. 텍스트 - 2. 웹 폰트 사용하기 웹 폰트를 사용하면 사용자 시스템에 없는 글꼴도 사용할 수 있다. 웹 폰트를 사용하려면 웹 문서를 작성할 때 글꼴 정보를 함께 저장해야 한다. 웹 문서를 서버에 올릴 때 웹 폰트 파일도 함께 업로드해야 한다. 웹 폰트를 사용한 사이트에 사용자가 접속하면 웹 문서를 내려받으면서 웹 폰트도 사용자 시스템으로 단운로드된다. 웹 폰트 업로드하고 사용하기 요즘엔 인터넷 사이트에서 웹 폰트를 제공해 주는 경우 주로 링크해서 사용하지만, 그렇지 않은 글꼴이거나 자신이 가지고 있는 TTF 폰트를 변환해서 사용한다면 여기서 설명한 방법으로 직접 업로드해서 사용해야 합니다. 컴퓨터에서 사용하는 사용하는 글꼴은 트루타입이고 파일 확장자는 *.ttf입니다. 하지만 트루타입 글꼴은 파일 크기가 커서 웹에서 사용하기엔 적절하지 .. 2022. 6. 1.
II. 텍스트 - 1. 글꼴 관련 스타일 font-family : 글꼴을 지정 웹 문서에서 사용할 글꼴은 font-family 속성으로 지정한다. 이 속성은 태그를 비롯해 태그나 태그처럼 텍스트를 사용하는 요소에서 주로 사용한다. font-family : | [, ] 웹 문서의 텍스트는 사용자 시스템의 글꼴을 이용헤 화면에 표시된다. 이때 만약 웹 문서에서 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 웹 문서에서 의도한 글꼴이 아닌 글꼴로 표시된다. 따라서 웹 문서에서 글꼴을 지정할 떄는 한 가지 글꼴만 선택하기도 하지만 글꼴이 없을 경우를 대비해서 두 번째, 세 번째 글꼴까지 생각해야 한다. 글꼴 이름을 두개 이상 지정할 때는 두 글꼴 이름 사이에 쉼표를 넣어 구분합니다. 또한 만약에 글꼴 이름에 띄어쓰기가 있을 경우 한 덩어리라는 것.. 2022. 6. 1.
I. CCS의 기본 - 3. 캐스케이딩 스타일 시트 CSS에서 C는 캐스케이딩(cascading)의 이니셜을 딴 것이며, 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미이다. 다시말해 CSS는 우선순위가 있는 스타일 시트 라고 할 수 있다. 즉, CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때, 우선순위에 따라 적용할 스타일을 결정하여 충돌을 피한다. 이때 스타일이 충돌하지 않게 하는 방법은 다음 두가지 방법이 있다. 스타일 우선순위 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다. 스타일 상속 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다. 스타일 우선순위 첫 번째 원칙인 스타일 우선순위는 캐스케이딩에서 가장 중요하다. .. 2022. 6. 1.
I. CCS의 기본 - 2. 기본 선택자 스타일 규칙은 태그뿐만 아니라 웹 문서의어떤 요소에도 적용할 수 있다. 선택자는 웹 문서에서 어느 부분에 스타일을 적용할 지 알려주는 것. 주로 사용하는 선택자를 알아보자 전체 선택자 말 그대로 문서의 모든 요소에 적용할 때 사용. * { 속성: 값; ... } 또한 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용 마진과 패딩 여백을 0으로 지정하는 식의 방식으로 자주 사용. 타입 선택자 특정 태그를 사용한 모든 요소에 스타일을 적용하는게 타입 선택자. 이전 글의 스타일 예시에서 본게 타입 선택자이다 태그명 {스타일 규칙} 클래스 선택자 태그가 같아도 일부는 다른 스타일을 사용하고 싶다면 타입 선택자 만으로는 부족할것이다. 이럴때 사용하는 것이 클래스 선택자이다. 클래스 선택자는 클래스 이름을 사용해.. 2022. 5. 31.
I. CCS의 기본 - 1. 스타일과 스타일 시트 스타일 CSS 소스에서 한 줄이 하나의 스타일에 해당한다. CSS스타일의 형식은 다음과 같다 선택자 {속성1: 속성값1 ; 속성2: 속성값2 } 선택자는 스타일을 어느 태그에 적용할 것인지 알려 주는 것이고, 중괄호 사이에는 스타일 정보를 넣는다. 속성과 값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라고 하며, 세미콜론으로 구분하여 여러개 지정 가능하다. 예를들어 텍스트단락의 글자를 가운데로 정렬하고 글자색을 파랑으로 하고 싶다면 다음처럼 하면 된다 p { text-align: center; color: blue; } css에서 주석은 /* */를 활용하여 작성할 수 있다. 스타일 시트 웹 문서 안에서는 스타일 규칙을 여러 개 사용한다. 이런 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도.. 2022. 5. 31.
폼에서 사용하는 여러 가지 태그 textarea : 여러 줄을 입력하는 텍스트 영역 여러 줄을 입력하는 텍스트 영역을 만듭니다. 게시판에서 글을 입력하거나, 약관 등을 표시할 때 자주 사용합니다 내용 cols와 rows 속성을 이용하여 텍스트 영역의 크기를 지정할 수 있습니다. cols는 문자 단위이고 rows는 줄 단위입니다. 지정한 rows수보다 텍스트가 길어지면 자동으로 스크롤 막대가 생깁니다 회원 가입을 환영합니다 메모 select, option : 드롭다운 목록 사용자가 내용을 직접 입력하는게 아니라 여러 옵션 중에서 선택하게 하려면 드롭다운 목록을 사용할 수 있다. select태그와 option태그를 이용해 표시한다. select태그로 드롭다운 목록의 시작과 끝을 표시하고, option태그를 사용해 그 안에 원하는 항목을 추.. 2022. 5. 30.
input 태그-6 (주요 속성들) input 태그에 여러 자잘한 기능들을 추가할 수 있는 속성들을 알아보자 autofocus : 자동으로 커서 가져다놓기 이 속성을 사용하면 페이지를 불러오자마자 원하는 요소에 마우스 포인터를 사용할 수 있다. placeholder : 힌트 표시 텍스트박스에 적당한 힌트 내용을 표시하고, 힐드를 클릭하면 힌트가 사라지도록 할 수 있다. '아이디를 입력하세요' 등의 힌트를 로그인 텍스트박스에 표시하는 것이 그 예시이다. autofocus와 placeholder를 사용하는 예제이다 배송 정보 이름 배송 주소 이메일 연락처 배송 지정(주문일로부터 최소 3일 이후) readonly : 읽기 전용 필드 입력은 못하고 읽게만 하는 읽기 전용 필드를 만들 수 있다. required : 필수 입력 필드 submit 버튼.. 2022. 5. 30.
input 태그-5 (버튼, 히든필드) 전송기능을 하는 submit 버튼 submit은 폼에 입력한 정보를 서버로 전송합니다. submit 버튼으로 전송된 정보는 태그의 action속성에서 지정한 폼 처리 프로그램에 넘겨집니다. 입력한 내용을 모두 지우는 reset 버튼 요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 합니다. 이미지 버튼 type="image"는 submit 버튼과 같은 기능을 하는 이미지 버튼을 나타냅니다. 기본 버튼 type="button"은 submit이나 reset버튼과 같은 기능이 없고 오직 버튼 형태만 삽입합니다. 주로 버튼을 클릭해서 자바스크립트를 실행할 때 사용합니다. 기본형은 다음과 같습니다 기본 버튼을 이용해 자바스크립트의 window.open() 함수를 실행하여 연결한 문서.. 2022. 5. 30.
input 태그-4 (날짜와 시간 입력) 날짜 입력하기 웹 문서나 애플리케이션에 달력을 넣으려면 type="data" , type="month" , type="week" 같은 날짜 관련 유형을 이용한다. 기본형은 다음과 같다 type 설명 "date" 달력에서 날짜를 선택해서 입력할 수 있다. "month" 달력에서 월을 선택해서 입력할 수 있다. "week" 달력에서 주를 선택해서 입력할 수 있다. 예시를 보자 날짜 지정하기 시간 입력하기 기본형은 다음과 같다 type 설명 "time" 폼에서 시간을 입력하게 합니다. 오전/오후, 시, 분으로 시간을 입력합니다. "datetime", "datetime-local" 사용자가 웹 문서를 보고 있는 지역에 맞는 날짜와 시간을 함께 입력할 수 있습니다. 예시는 다음과 같다 시간 지정하기 2022. 5. 30.
input 태그-3 (number, range) 스핀박스나 슬라이드 막대를 통해 숫자를 입력받는게 더 편할 때, type="number", type="range"를 사용할 수 있다. 기본형은 다음과 같다 number 와 range 필드에서 사용할 수 있는 속성은 다음과 같다 속성 설명 min 필드에 입력할 수 있는 최솟값을 지정합니다. 기본 최솟값은 0입니다. max 필드에 입력할 수 있는 최댓값을 지정합니다. 기본 최댓값은 100입니다. step 숫자 간격을 지정할 수 있습니다. 기본값은 1입니다. value 필드에 표시할 초깃값입니다. 이를 활용한 예제는 다음과 같다 선물용 3kg 개 (최대 5개) 선물용 5kg 개 (최대 3개) 가정용 3kg 개(최대 5개) 가정용 5kg 개(최대 3개) 2022. 5. 30.

티스토리툴바