자바스프링웹공부(2024)/HTML, CSS (13) 썸네일형 리스트형 2024.09.13. CSS - 배경색과 배경이미지 background 1. background-clip 속성: 배경색이 칠해지는 범위조절 - background-clip: border-box; (테두리 영역까지, 기본값이다. = 아무것도 안적으면 border-box 적용됨.) - background-clip: padding-box; ( 패딩 역역까지 ) - background-clip: content-box; ( content 영역까지 ).desc { width: 100px; height: 100px; border: 5px dotted black; padding: 20px; color: #fff;}#clip-border { background-color: red; background-clip: border-box;}#clip-padding { backgrou.. 2024.09.06.CSS - 박스모델 * 둥근테두리 border-radius속성 : 박스모델의 둥근테두리를 지정border-radius: 50%; /*원형으로 테두리를 표시하는 방법1. div의 높이와 너비가 같아야 한다.2. % 사용. */ * 박스모델 여백지정(안쪽/바깥쪽)* 가로방향 가운데 정렬하기/* top, bottom : 0px left, right: 자동으로 바깥 여백 조정 , 브라우저 크기를 바꿔도 정중앙에 있음. *//* auto: 가로방향에서 정중앙에 오게하는 키워드 */margin: 0 auto;(==)margin-left: auto;margin-right: auto;* 박스모델 안의 글자 세로방향 가운데 정렬.#box4 { width:200px; height:100px; line-height: 100px;/* di.. 2024.08.30.CSS - 박스모델(블럭요소,인라인요소,그림자효과) * 박스모델(box model)- 블럭요소(block element)와 인라인요소( inline element)가 있다. 1. 블럭요소(block element) : 자신만의 너비(width), 높이(height)를 가진다. - 자동으로 줄바꿈이 일어나는 태그- 너비(width)를 줄여도 한줄을 다 차지하는 것은 똑같다. 2. 인라인 요소(inline element) : 줄바꿈이 일어나지 않는 태그. - 자신만의 너비와 높이를 가질 수 없다.(입력되어 있는 내용 너비만큼만 공간을 차지할 수 있다.)- span은 width, height가 아예 먹히질 않음. 글자만큼만 자리를 차지함. (span을 div에 담아서 사용) * box-sizing: content-box; / box-sizing: borde.. 2024.08.23. CSS - 목록 스타일 * 목록 표시 스타일 변경 3가지 속성1. 목록 표시 변경 속성 : list-style-type 속성 list-style-type: none; /*square-사각,disc-검은원,circle-빈원,none-없음2. 목록 표시를 이미지로 변경하는 속성 : list-style-image 속성 list-style-type: none; /*none, upper-alpha-대문자 알파벳,upper-alpha 대문자 로마자 등등.3. 목록의 들여쓰기 변경 속성 : list-style-position 속성 - CSS 에서 이미지 가져오기 : url("경로") 함수사용 list-style-image: url("image2/dot.png"); - 목록 들여쓰기 속성 지정 .. 2024.08.23. CSS - 바깥쪽 여백(margin)과 안쪽(padding) 여백 div { background-color: red; width: 200px; height: 200px; /* 위아래는 10px이고 오른쪽 왼쪽은 auto로 맞춰라.= 중간으로 보내라.*/ margin: 10px auto; }#d1 { background-color: green; font-size: 5em; font-weight: 900; border: 3px solid black; /* 안쪽에 여백이 늘어나면서 상자가 커지게 된다. */ padding: 40px;}1234 *div는 전체 공간을 차지하므로 한개에 한줄씩 차지한다. (인라인요소)*magin은 바깥쪽 여백이므로 div 끼리 원래 붙어있었는데 10px 만큼 떨어져 버렸다. ** 블럭요소인 im.. 2024.08.23. CSS - 텍스트 관련 스타일 * 텍스트정렬(text-align속성) - text-align: left, right, center, justify;* 줄간격 지정 (line-height 속성) - line-height :em, px, % * 텍스트에 선만들기(text-decoration 속성) : text-decoration: none, line-through(취소선), overline(윗줄),underline(밑줄); - 하이퍼링크에서 밑줄 없앨 때 많이 사용함.* 텍스트에 그림자 만들기 (text-shadow 속성) : -형식)text-shadow: 가로거리 세로거리 번짐정도 그림자 색상 - 수평거리 : 양수 - 오른쪽, 음수 - 왼쪽 .. 2024.08.22. CSS(Cascading Style Sheet), 웹폰트와 아이콘폰트 CSS(Cascading Style Sheet) :HTML 문서에 있는 요소(tag)들에 선택적으로 스타일(서식)을 적용할 수 있는 기능이다. * 사용자 스타일 지정 형식 3가지 : 1.인라인 스타일, 2.내부 스타일, 3.외부 스타일 1. 인라인 스타일 형식 : 간단하게 스타일을 적용2. 내부 스타일 형식 : 적용할 스타일들을 문서내부에 한곳에 모아놓고 스타일을 적용 head 영역내에 style 태그로 지정 내부 속성 지정 형식)선택자 { 속성1: 속성값1; 속성2:속성값2...... }3. 외부 스타일 형식 : 적용할 스타일들을 문서외부에 별도의 파일(*.css)로 저장해 놓고 필요한 HTML 문서(파일)로 가져와서 스타일 적용 외부 스타일 연결 형식) * CSS 기본 선택자 (selec.. 2024.08.21. HTML - input 타입속성 9) input type 속성 : file 속성값(파일 첨부할 때 사용하는 업로드 창을 삽입) 10) input tag 주요속성 1. autocomplete 속성 : 폼이나 요소에 자동완성 기능의 지원여부를 지정. 형식) autocomplete = "on/off" 2. autofocus 속성 : 페이지가 로드 될 때 특정 폼 요소에 자동으로 커서가 표시(get focus)디도록 지정 3. placeholder 속성 4. readonly 속성 5. required 속성11) textarea tag : 여러 줄을 입력하는 텍스트 영역을 만듦 12) select, option 태그 : 드롭다운목록(drop down list)을 만들 .. 이전 1 2 다음
