CSS 박스 모델

CSS 박스 모델 1. CSS 박스 모델 블록 레벨 요소 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소 요소의 너비가 100% , 등 더보기 시간이란... 내일 죽을 것처럼 오늘을 살고 영원히 살 것처럼 내일을 꿈꾸어라. 인라인 레벨 요소 줄을 차지하지 않는 요소 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 , 등 박스 모델 실제 콘텐츠 영역, 패딩(padding), 박스의 테두리(border), 그리고 마진(margin) 등의 요소로 구성됨. 개발자 도구 창에서 박스 모델 확인 가능 width, height 속성 실제 콘텐츠 영역의 크기 지정 더보기 2. CSS 박스 모델(display 속성) display : block display 속성이 block으로 지..

• format_list_bulleted HTML CSS/CSS
• · 2024. 4. 9.
• textsms

색상과 배경을 위한 스타일

색상과 배경을 위한 스타일 1. 웹에서 색상 표현하기 16진수 표기법 #ffffff 처럼 #과 함께 6자리의 16진수로 표시 앞에서부터 두자리씩 묶어 빨강, 초록, 파랑의 양. 하나도 섞이지 않았을 때는 00, 가득 섞였을 때는 ff로 표시 000000(검은색) 〜 ffffff(흰색) 두자리씩 중복될 경우 줄여 사용할 수 있음. 예) #ffff00 → #ff0 #cccccc → #ccc hsl/hsla 표기법 color : hsl(240, 100%, 50%) 처럼 세 자리의 숫자로 표시. 앞의 숫자부터 색상(hue), 채도(saturation), 밝기(light)의 양. 투명도를 조절할 때는 hsla(240,100%,50%,0.3)처럼 마지막에 알파값 추가 알파값은 불투명도를 나타내는 값으로 0니 값 중..

• format_list_bulleted HTML CSS/CSS
• · 2024. 4. 9.
• textsms

텍스트 관련 스타일

텍스트 관련 스타일 1. 글꼴 관련 스타일 font-family 속성 웹 문서에서 사용할 글꼴 지정 태그를 비롯해 태그나 태그처럼 텍스트를 사용하는 요소들에서 사용 웹 문서에서 글꼴을 지정할 때는 한 가지 글꼴만 지정하기도 하지만 지정한 글꼴이 없을 경우에 대비해 두 번째, 세 번째 글꼴까지 지정함. 둘 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 글꼴 구분 font-size 속성 글자 크기를 조절하는 속성 사용할 수 있는 값: 절대 크기, 상대 크기, 숫자, 백분율 기본 값은 상대 크기인 medium px 단위 px 단위를 사용하면 폰트 크기가 고정됨 모바일 기기로 볼 때도 같은 크기로 화면에 표시되기 때문에 작은 화면 안에 작은 글씨로 표시됨 em 단위 사용하는 글꼴의 대문자 M을 기준으로 한다. 대..

• format_list_bulleted HTML CSS/CSS
• · 2024. 4. 9.
• textsms

CSS 기초

CSS 기초 1. 스타일과 스타일 시트 스타일과 스타일 시트 스타일(style) : HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용들 스타일 시트(style sheet) : 스타일을 관리하기 쉽도록 한 군데 모아놓은 것 왜 스타일을 사용할까? 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다. 내용과 디자인의 분리 - 웹 표준의 시작 디자인에 영향 없이 내용 수정하거나 내용은 건드리지 않고 디자인만 바꾸는게 가능 다양한 기기에 맞춰 탄력적으로 바뀌는 문서를 만들 수 있다. 내용은 그대로 두고, 프린터나 스마트폰 브라우저 등 다양한 기기에 맞는 레이아웃을 만들 수 있다. 스타일 형식 선택자 : { 와 } 사이에 정의한 스타일 규칙이 적용될 대..

• format_list_bulleted HTML CSS/CSS
• · 2024. 4. 9.
• textsms

여러 데이터 나열해 보여주기

여러 데이터 나열해 보여주기 1. 여러 데이터 나열해 보여주기 , 여러 옵션 중에서 선택 – 드롭다운 목록 공간을 최소한으로 사용하면서 여러 옵션 표시 가능 태그의 속성 태그의 속성 더보기 여름방학 특강 신청 수강 신청인 학번 이름 학과 건축공학과 기계공학과 산업공학과 전기전자공학과 컴퓨터공학과 화학공학과 , , 태그 여러 항목을 그룹을 묶을 때 사용 label 속성을 사용해 그룹 제목을 붙임 더보기 여름방학 특강 신청 수강 신청인 학번 이름 학과 건축공학과 기계공학과 산업공학과 전기전자공학과 컴퓨터공학과 화학공학과 사학과 어문학부 철학과 , 데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 텍스트 필드에 입력됨 데이터 목록에 id를 이용해 이름을 붙이고, 태그의 list 속성에 데이터 목록 i..

• format_list_bulleted HTML CSS/HTML
• · 2024. 4. 8.
• textsms

<input>태그의 다양한 속성

태그의 다양한 속성 1. 폼 만들기 웹에서 만나는 폼 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼(form) 폼과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들 이런 작업은 모두 데이터베이스를 기반으로 한다. 아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 HTML 태그 폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP 같은 서버 프로그래밍 이용 여기에서는 서버 프로그래밍에 대해서는 다루지 않고 브라우저에 표시될 폼을 만드는 태그들에 대해 살펴본다. 폼의 동작 방식 사용자가 [아이디]와 [비밀번호]에 정보 입력 → [로그인] 클릭 사용자가 입력한 아이디와 비밀번호가 웹 서버로 보내짐 서버는 자신이 가지고 있는 사용자 데이터베이스를 뒤져서 사..

• format_list_bulleted HTML CSS/HTML
• · 2024. 4. 8.
• textsms