HTML7 [CSS 정리] 웹요소 위치, 배경 설정, 선택자 웹 요소의 위치 지정 position : 속성 static 문서 흐름에 따라(기본) relative static + 위치값 지정 가능 absolute relative 값을 사용한 상위 요소 기준으로 지정 fixed 브라우저 창을 기준 속성 지정 후 top, left, right, bottom 을 이용해 세부적인 위치 조정이 가능 배경색, 배경 범위 배경색 background-color : 색상 배경색 범위 지정 background-clip : border-box | padding-box | content-box 배경 이미지 background-image : url(’이미지 파일 경로’) 이미지의 반복 background-repeat : repeat | repeat-x(너비에 찰때까지)| repeat-y(.. 2022. 8. 9. [CSS 정리] 목록, 표, 레이아웃 배치 관련 스타일 목록 스타일 불릿, 번호 스타일 list-style-type : disc 채운 원 circle 빈 원 square 네모 모양 decimal 10진수 decimal-leading-zero 앞에 0이 붙은 10진수 lower-rowan / upper-roman 로마 숫자 소문자 / 대문자 lower-alpha / upper-alpha 영어 소문자 / 대문자 none 없음 불릿, 번호를 이미지로 대체 list-style-image : 목록을 들여쓰기 list-style-position : inside / outside(기본값) 표 스타일 표 제목 위치 caption-side : top | bottom 셀 사이 여백 border-spacing : 수평거리 수직거리 표, 셀 테두리 합치기 border-collap.. 2022. 7. 30. [개인과제] HTML + CSS로 웹페이지 만들기 저번달에 국비 학원에서 내줬었던 웹 페이지 만들기 과제 과정을 기록해본다...! 과제 내용 : 주제는 자유. 그동안 배웠던 HTML+CSS 언어를 활용하여 웹페이지 만들기 내가 생각한 주제 : 제로 웨이스트를 알리는 웹페이지 구성 : 메인페이지, 제로웨이스트란, 우리가 할 수 있는 일, 캠페인 페이지로 총 4페이지 메인 페이지 가운데 큰 이미지는 호버하면 transform: scale(1.3); 효과로 확대되게 했다 nav 의 메뉴들은 호버하면 녹색으로 변하고 클릭하면 각 페이지로 이동하게 했다 우측 하단에 재생, 정지 버튼을 넣었는데 처음엔 audio control bar를 넣었지만 길이를 줄이면 조금 애매한거 같아서 구글로 열심히 찾아 Audio 함수를 넣어 버튼으로 구현했다... (버튼 디자인 예쁜.. 2022. 7. 30. [CSS 정리] 형식, 글꼴, 텍스트 스타일 스타일 형식 선택자 { 속성1 : 속성값1; 속성2 : 속성값2;} 선택자 : 어느 태그에 적용할 것인지 속성 : 스타일 정보 인라인 스타일 간단한 스타일 정보, 적용할 대상에 직접 지정한다 껍질에 붉은 빛이 돌아 레드향이라 불린다. 내부 스타일 시트 사용할 스타일을 문서안에 별도로 정리한 것 스타일 우선순위 !important(잘쓰지않음) > 인라인 > id(#) > 클래스(.) > 타입 글꼴 관련 스타일 글꼴 (1순위와 2,3순위를 적어둔다) : 1순위가 없으면 다음 순위의 글꼴이 적용됨 font-family : “맑은 고딕”, 돋움, 굴림; 글자크기 font-size : | | | em 부모요소에서 지정한 글꼴의 대문자 M 기준으로 rem 문서 시작부분에서 지정한 크기 ex 해당 글꼴의 x의 높이 .. 2022. 7. 10. 이전 1 2 다음
