본문 바로가기

전체 글402

글꼴 관련 스타일(font-famliy, font-size 등) 글꼴 지정 (font-famaily) body { font-family: "맑은 고딕", 돋움, 굴림 } /* 맑은(v)고딕 처럼 공백이 있는 경우 두 개로 인식할 수 있기 때문에 "" 큰 따옴표로 묶는다. */ /* body 전체에 맑은 고딕을 적용하고 그 폰트가 없으면 돋움, 돋움도 없으면 굴림으로 적용하라. */ 글꼴 크기 (font-size) font-size: | | | 절대 크기 : 브라우저에서 지정한 글자 크기 상대 크기 : 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기를 지정 크기 : 브라우저와 상관없이 글자 크기를 직접 지정 백분율 : 부모 요소의 글자 크기를 기준으로 백분율(%) 표시 키워드를 사용한 글자 크기 xx-small < x-small < small < medium < .. Programing/CSS 2024. 2. 26.
케스케이딩 스타일 시트 의미 Cascading의 의미는 우선순위가 계단식으로 적용된다는 뜻. 웹 브라우저 출력 화면의 우선 순위 1. 사용자 스타일 > 2. 제작사 스타일 > 3. 브라우저 기본 스타일 같은 스타일 내에서 스타일 성격에 따른 우선순위 !important 인라인 스타일 : 태그 안에 직접 style 속성을 지정 id 스타일 : #id 속성 클래스 스타일 : .class 속성 타입 스타일 : 하나의 태그 자체를 같은 스타일 성격 내에서의 우선순위 문서 위에서 아래로, 먼저 작성된 것부터 우선순위 참고 : 웹 표준의 정석 (고경희 저) Programing/CSS 2024. 2. 26.
CSS의 기본 선택자 전체 선택자 : * 웹 문서의 전체의 스타일을 초기화할 때 자주 사용한다. (주로 마진과 패딩을 없애거나 할 때) 타입 선택자 (type selector) 태그와 같이 특정 태그로 쓰여진 모든 요소에 일괄적으로 적용할 때 사용하는 선택자이다. ※ 타입 선택자(type selector)와 태그 선택자(tag selector), 요소 선택자(element selector)는 일반적으로 같은 의미다. 하지만 W3C 공식 문서에서는 type selector라는 명칭을 사용하니 참고. p { font-style: italic; } 클래스 선택자 (class selector) 특정 클래스에만 CSS를 적용할 때 사용한다. .classname { font-size: 10px; } 참고로 하나의 태그에 두 개 이 상의.. Programing/CSS 2024. 2. 26.
CSS (Cascading Style Sheets)의 의미 HTML이 문서의 골격을 만든다면 CSS는 문서의 디자인적 요소를 담당한다. CSS를 사용하면 HTML의 내용이나 구조를 건드리지 않고 디자인을 일괄적으로 수정할 수 있어 용이하다. CSS를 사용하면 PC환경 뿐만 아니라 모바일 기기 등에도 최적화화여 반응형 웹 디자인을을 할 수 있다. 준비하기 크롬 Web Developer 확장 기능 설치하기 (chrome.google.com/webstore) Web Developer 검색 후 설치 기능 테스트 (CSS 꺼보기) 스타일의 기본 형식 선택자 { 속성1: 속성값1; 속성2: 속성값2; } 예시 (P 태그로 쓰인 모든 글을 가운데 정렬하고 파란색으로 바꾸기) p { text-align: center; color: blue; } ※ 한 줄로 쭉 나열해도 되지만.. Programing/CSS 2024. 2. 26.
[심리학] 지혜롭다는 것은? "지혜는 한계를 인정하는 것이다." 지혜란 자신이 아는 것과 알지 못하는 것, 할 수 있는 것고 할 수 없는 것 사이의 경계를 인식하는 데서부터 출발한다. 심리학은 우리 마음이 얼마나 많은 착각과 오류, 오만과 편견, 실수와 오해로 가득 차 있는지를 적나라하게 보여주는 동시에 이런 허점들이 프레임이라고 하는 마음의 창에 의해서 생겨남을 증명하고 있다. ... 우리도 프레임이라는 마음의 창을 통해서 보게 되는 세상을 볼 뿐이다. 우리는 세상을 있는 그대로 객관적으로 보고 있다고 생각하지만, 사실은 프레임을 통해서 채색되고 왜곡된 세상을 경험하고 있는 것이다. 프레임으로 인한 이러한 마음의 한계에 직면할 때 경험하게 되는 절대 겸손, 나는 이것이 지혜의 출발점이라고 생각한다. - 프레임 (최인철 저) 벤저민.. Hobby/Reading 2024. 2. 25.
Form 폼의 이해 입력창을 말한다. 입력창 자체는 HTML로 만들지만 안에 있는 내용을 서버로 전송할 때는 ASP나 PHP, JSP와 같은 서버 프로그래밍을 이용한다. 여러 폼 요소 form 태그의 속성과 속성값 method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정. 값으로는 get : 데이터를 256 ~ 4,096 byte까지만 서버로 넘길 수 있음. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있음. post : 내용의 길이에 영향을 받지 않고 사용자가 입력한 내용도 노출되지 않음. name : JS로 폼을 제어할 때 사용할 이름을 지정 action : form 태그 내의 내용을 처리해 줄 서버 프로그램을 지정 target : action 속성에서 지정한 스.. Programing/HTML 2024. 2. 25.
하이퍼링크 텍스트 또는 이미지 이미지는 사이에 태그를 넣으면 된다. 새 탭으로 여는 속성 target 클릭 Programing/HTML 2024. 2. 25.
오디오와 비디오 삽입하기 embed 태그 참고 : 확장자별 특징 비디오 mp4 : 라이센스가 있음. 그러나 웹에서는 무료 사용 가능. 사파리, 크롬 등 모든 브라우저 지원 webm : 화질이 좋고 무료 라이센스이나 익스플로러, 사파리, 안드로이드에서 재생 불가 오디오는 mp3 확장자를 주로 쓰고 모든 브라우저에서 지원함. , 태그 속성 controls : 플레이어 화면에 컨트롤바를 표시함 autoplay : 자동으로 실행, 대부분 브라우저는 자동재생을 금지함. 엣지브라우저는 됨. 크롬에서는 muted와 함께 쓰이면 자동재생 가능하나 모바일 기기에서는 불가능. loop : 반복 재생 mute : 소리를 제거 preload : 기본값은 auto이며 metadata, none도 값으로 지정 가능 width, height poster=.. Programing/HTML 2024. 2. 25.
이미지 삽입하기 이미지 삽입하는 기본 태그 대체용 텍스트는 시각장애인에게 주는 정보이기도 하므로, 나의 편의로 적는 것이 아니라 해당 이미지가 무엇을 나타내고 있는 지를 적는 것이 좋다. 이미지 크기 조절하는 속성 width, height 속성에서 img의 크기를 지정하지 않으면 이미지의 원래 크기로 load됨. height와 width 중 하나만 지정하면 나머지는 비율에 맞게 조정됨. 이 속성에 쓰이는 단위는 px와 %가 있음. %는 현재 웹브라우저의 높이나 너비를 측정해서 차지하는 비중을 자동으로 계산한다. Programing/HTML 2024. 2. 25.
표 만들기 표의 구성요소 행row (가로) 열column (세로) 셀cell (칸) 표 제목(생략가능) 1행 1열 1행 2열 2행 1열 3행 2열 번호(강조표시:보통 제목 행이나 열) 이름 1 김철수 2 김영희 CSS를 사용하기 위해서 표에서도 섹터를 구분한다. , , 을 사용한다. 선물용과 가정용 상품 구성 용도 중량 개수 가격 선물용 3kg 10개 35,000원 행, 열 병합 , 내용 내용 선물용과 가정용 상품 구성 용도 중량 개수 가격 선물용 3kg 10개 35,000원 1kg 3개 8,000원 열 묶기 , 셀의 너비를 지정하거나 배경색 등을 넣을 때 사용한다. 태그는 열을 1개만 지정할 때 사용하고 은 태그를 2개 이상 묶어서 사용한다. 과 은 뒤에 써야 한다. 은 열(세로)의 개수만큼 안에 써야 한다. 꿀.. Programing/HTML 2024. 2. 25.

티스토리툴바