Programming/html5 & css3 (21) 썸네일형 리스트형 CSS3 / border 속성 1. border 속성 (3개) - border-width 속성 - border-style 속성 - border-color 속성 2. border-radius 속성 .box { width: 100px; height: 100px; margin: 50px; border-width: 10px; /*테두리의 너비 나타냄. 선의 두께*/ border-style: solid; /*테두리에 어떤 스타일을 적용할 것인지 나타냄.*/ border-color: red; /*테두리에 어떤 색을 지정할 것인가*/ /* 위에 3개를 아래처럼 boder 한 줄에 한꺼번에 다 쓸 수 있음*/ border: 10px(너비) solid(스타일) red(컬러); /*margin과 다르게 각각 한개의 속성값만 입력가능. margin : .. CSS3 / 박스box 속성 - margin, padding, box-sizing 1. 박스 속성 기본 - width height margin padding 2. 배경의 적용 범위 3. 실질적인 너비와 높이 구하기 4. box-sizing 속성 Duism commodo enim Lorem do fugiat. Voluptate velit aute Lorem cillum quis magna consectetur cillum ex aute. Culpa in minim incididunt laborum culpa magna. Culpa est ex irure exercitation est dolore sint irure ipsum occaecat exercitation. Nisi quis amet ad do amet non ex. Veniam voluptatat culpa. Exercitat.. CSS3 / 가시속성 - display 속성 가시속성 : 눈에 보이는 방식을 지정하는 속성 1. display 속성 - none 또는 block 또는 inline 또는 inline-block형태 지정 2. visibility 속성 - 대상을 보이거나 보이지 않게 지정하는 스타일 속성. - collapse : table태그를 보이지 않게 한다. 익스플로러와 파이어폭스에서만 작동. - visible : 태그를 보이게 - hidden : 태그 안보이게. 화면에서 보이지 않을 뿐(공간O) VS display:none은 태그가 아예 화면에서 제거된다.(공간X) Hello Hello Hello Hello Hello World World World World World alpha Hello World Hello World Hello World Hello Hel.. CSS3_2/ 스타일속성의 단위 - 키워드, 크기, 색상, URL 스타일값에 넣을 수 있는 단위 : 1. 키워드 단위 입력하는 것 = 글자를 입력하는 것. 예) {스타일속성: none } 2. 크기 단위 - % : 크기를 % 단위로 지정하는 것.(상대적) 기본 설정된 크기에서 상대적 크기를 지정. - em/rem : 크기를 배수단위로 지정.(상대적) - px : 절대적인 크기를 지정하는 단위 - mm, cm, inch 1em=100% 1.5em=150% 폰트 크기를 지정할 때는 크기 단위를 섞어서 사용하는 경우가 많다. 전체 폰트 크기에 절대 크기를 지정하고 각각의 태그에 상대 크기를 지정하는 방법을 매우 많이 사용한다. 크기 단위 0을 입력할 땐 단위 생략 가능. 3. 색상 단위 4. URL 단위 - css3에서 이미지 파일이나 폰트 파일을 불러올 때 사용하는 단위인.. CSS3_1/ 선택자 CSS를 사용하는 방법 1.외부파일로 만들어서 작성하는 방법 Hello World -태그선택자 : 특정한 태그를 선택할때 쓰는 태그선택자. 태그의 이름을 넣어주면된다. 쉼표로 여러개 지정가능. Nulla esse occaecat minim sunt id velit magna reprehenderit non non occaecat. Id sit minim veniam mollit sunt irure ea nulla. Ad laborum tempor adipisicing cupidatat. Ex exercitation do sunt voluptate. Eu mollit minim deserunt et eiusmod. Elit cupidatat est nulla exercitation sit amet eu u.. Html5_8/ 공간분할 태그 - div, span 태그 Html에서 공간을 분할하는 이유 : 공간을 분할해야 CSS를 사용해 원하는 레이아웃을 구성할 수 있다. 공간분할하는 형식은 Block형식과 Inline 형식으로 나뉜다. block은 빌딩처럼 층층이 분할 inline은 가로로 길게 한 층을 칸칸이 분할 *공간분할 태그 - block 형식으로 공간분할 - inline 형식으로 공간분할 Block Block Block Block Block Inline Inline Inline Inline Inline InlineInlineInline h1~6 / div / p / ul / ol / li / table / form 글자 글자 span / a / input / 글자형식태그(b/i/del/sub/sup...) 글자 글자 글자 /*참고로 는 inline처럼 보이는.. Html5_7/ 입력양식 태그(2) - textarea, select 태그 input 태그가 아닌 입력양식 : textarea태그, select태그 textarea태그의 속성 - cols - 태그 너비 지정 - rows - 태그 높이 지정 select : 여러개 목록에서 몇가지 선택할 수 있는 입력양식 요소. 선택양식을 생성. (select 기능은 디자인적으로 별로라 실제론 css와 자바스크립트를 대신 사용함) *여러 개의 목록을 선택하고 싶을 때 쓰는 multiple 속성(중복 선택) - 옵션을 그룹화 - 옵션 생성 내용물 내용물 (textarea태그 안에 미리 글자를 입력하고 싶으면 글자 입력. textarea태그에 여러줄의 글자를 입력할 때, 공백X 띄어쓰기X 줄바꿈 하면 왼쪽에 여백없이 붙여서 작성.) 바나나 수박 딸기 Hello World Html5_6/ 입력양식 태그(1) - form, label, input 태그 form 태그 안에 input 태그 (내용물X) label 태그는 input 태그를 설명하는데 사용 (내용물O) label의 for속성의 속성값과 input의 id속성의 속성값 일치시키기. input태그의 type속성값 : button / checkbox / file(파일선택 버튼) / hidden / image / password / radio / reset(초기화 버튼) / submit(제출버튼) / text / ....... - 입력양식 설명하는 태그. legend태그는 fieldset태그 내부에서만 사용할 수 있다. 입력 양식 아이디: 비밀번호 인터넷 친구권유label> 광고label> 성별 남성: 여성: 기타: 이전 1 2 3 다음
