Study53 공공 데이터의 일부를 뽑아서 지도에 나타내기 - (1) 컴퓨터 학원 보호되어 있는 글 입니다. 2025. 1. 7. css 우선순위, 변수 css 스타일 적용 우선순위important, id, class, element 순서대로 순위를 가진다 #id-style { background-color: deeppink; }#id-style2 { background-color: deepskyblue; }div { padding: 30px; margin: 30px; background-color: gold;}.class-style3 { background-color: beige !important ; }.class-style { background-color: greenyellow; }.class-style2 { background-color: pink; font-style: 30px; }ul>li.li-class{ background.. 2024. 11. 5. css 미디어 쿼리 미디어 쿼리(Media Query)반응형 웹 디자인 요소로서 웹 화면의 콘텐츠가 디바이스마다 적절한 스타일로 보여질 수 있게 설정하는 기능이다.모바일, 태블릿, PC 환경에 따라 화면 크기가 달라지므로 웹 사이트를 구상할 시 미디어 쿼리 기능을 설정해 주는 것이 좋다.화면 크기에 따라 배경색이 달라지는 예제 코드를 연습해 보자./* CSS *//* PC 스타일 */@media screen and (min-width: 1025px) { body { background-color: deepskyblue; }}/* 태블릿 스타일 */@media (min-width: 768px) and (max-width: 1024px) { body { background-color: gold; }}/* 휴대폰 스.. 2024. 11. 4. css 레이아웃 연습 (2단, 3단, 다단, flex) 1. 2단 레이아웃 연습하기다음과 같은 html 화면이 나오도록 코드를 작성해 보자. ① html 작성전체 요소를 가운데 정렬하기 위해 모든 요소를 감싸는 큰 div(container) 만들기header-사이트 제목, main-본문, aside-사이드바, footer 시맨틱 태그 만들기div 안에 들어갈 h 속성과 p 태그, ul>li 태그 설정하기 ② css 작성 전 id 값 설정하기 사이트 제목 본문 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima incidunt recusandae voluptatum? Fugit commodi recusandae voluptatum co.. 2024. 11. 4. css semantic tag, position, float 시맨틱 태그(Semantic Tag)문서의 구조와 콘텐츠 의미를 나타내는 역할을 하는 div 태그검색 엔진 접근성을 개선하고 코드 가독성을 높이는 데 도움을 줌태그의 이름만 다를 뿐 div 태그와 기능은 동일: 페이지의 머리글로 내비게이션 메뉴 등을 포함한다.: 페이지의 꼬리글로 저작권 정보, 연락처, 링크 등을 포함한다.: 메뉴를 구성한다.: 콘텐츠와 관련성이 적은 보조 콘텐트: 주제별로 콘텐츠의 구역을 나눌 때 사용한다.: 독립적으로 구분되는 기사나 포스트, 배포 가능하거나 재사용할 수 있는 콘텐츠: 문서의 주요 콘텐츠 부분 위치 지정 방식(Position)1. 정적 위치 지정 방식 (position: static)position 속성의 초깃값HTML 문서에 작성된 순서대로 요소들의 위치가 결정된.. 2024. 11. 4. css form 앞서 공부했던 css 속성들을 사용하여 form 태그 꾸미는 연습을 해 보자.폼 태그는 전부 input 속성이기 때문에 input 전체를 꾸미기보단 태그 각각을 꾸미는 게 좋음border-radius: 테두리를 둥글게 만들어주는 속성/* CSS */.input{ box-sizing: border-box; width: 100%; padding: 10px 20px; margin: 5px 0;}input[type='text'] { border-radius: 20px;}input[type='text']:focus { background-color: gold; border: 3px dotted black}input[ty.. 2024. 11. 3. 이전 1 2 3 4 5 ··· 9 다음
