본문 바로가기

웹 프로그래밍/HTML | CSS5

[오류해결] 반응형 웹 적용되지 않는 오류 오류 상황 미디어쿼리를 다음과 같이 작성했음에도 모바일 화면에 원하는 결과가 나오지 않는 오류 발생 @media screen and (min-width: 320px) and (max-width: 800px) { /*css코드*/ } 라는 오류가 발생하고 onclick이벤트가 동작하지 않는 오류 발생 해결 html의 안에 다음 코드를 추가한다. width=device-width: 화면의 넓이를 디바이스의 넓이로 지정 initial-scale=1: 초기 화면 배율 참고: https://hohoya33.tistory.com/127 CSS 미디어 쿼리 디바이스별 해상도 분기점 기본적으로 반응형웹을 적용하기 위해서 먼저 HTML head 부분에 meta viewport를 설정해주어야 합니다. width=devic.. 2023. 3. 24.
CSS Flex Box Container에 적용되는 속성 값 display flex-direction flex-wrap flex-flow justify-content align-items align-content Item에 적용되는 속성 값 order : 순서 지정 flex-grow flex-shrink flex align-self 중심축main axis (수평) → (수직) ↓ 반대축cross axis (수직) ↓ (수평) → div*10 + Tab div.container>div.item.item${$}*10 + Tab : 아래와 같은 body 손쉽게 작성 가능 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 CSS .container{ background: beige; height: 100vh;.. 2022. 7. 4.
CSS Display & Position Display HTML 1 2 3 CSS div, span { width: 80px; height: 80px; margin: 20px; } /*한 줄에 하나씩 나옴*/ div{ background: red; display: inline-block; /* inline: 한 줄에 여러개가 진열될 수 있는 상자 span과 같이 한 줄에 여러개씩 나옴. 사용자가 정의한 박스 크기대로 화면에 표시 */ /* display: inline; inline: 물건 span과 같이 아무런 내용이 없으면 화면상에 표시되지 않음. 사용자가 정의해 놓은 사이즈는 무시하고 컨텐츠 크기에 따라 달라짐. */ } /*한 줄에 여러개씩 나옴.*/ span{ background: blue; display: block; /*div와 같이.. 2022. 7. 4.
CSS 선택자 Universal * type Tag ID #id Class .class State : Attribute [] selector{ property: value; } 기본적인 선택자 구성 * { color: green; } 전체 태그 글자색 변경 li { color: blue; } 태그의 글자색 변경 li#special { color: pink; } 태그 중 id가 special인 태그의 글자색 변경 .red { width: 100px; height: 100px; background: yellow; } class가 red인 태그의 속성 변경 button:hover { color: red; background: beige; } 태그에 마우스를 올렸을 때 속성 변경 a[href="naver.com"]{ colo.. 2022. 7. 4.
HTML/CSS 참고 블로그 및 사이트 https://www.w3schools.com/ W3Schools Free Online Web Tutorials W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com https://heropy.blog/2019/04/24/html-css-starter/ 입문자에게 추천하는 HTML, CSS 첫걸음 개요HTML, CSS 그리고 JavaScript웹 표준크로스 브라우징웹 접근성정보.. 2021. 11. 26.
반응형

티스토리툴바