'Class' 태그의 글 목록

13 CSS의 미디어쿼리를 사용해서 반응형 웹 페이지 만들기 (화면 크기에 따라 글씨 내용과 색깔이 달라져요)

2023.05.31

CSS의 미디어쿼리를 사용해서 반응형 웹 페이지 만들기 (화면 크기에 따라 글씨 내용과 색깔이 달라져요) CSS의 미디어쿼리를 이용해서 해상도에 따른 색상과 멘트의 변경을 코딩했다. 결과적으론, 두 가지 방식으로 코딩을 했다. 처음엔 무작정 헤딩을 하며 코딩을 했는데.. 완성하고 보니, 아쉬운 마음이 들었다. 왠지 이 것보다는 더 나은 구조로도 만들 수 있을 것 같았다. 결국, 두 번째에는 여러 자료를 구글링 해서 코드 구조를 개선할 수 있었다. display: inherit; 역시 아는 것이 힘이다. *내 노트북 해상도를 기준으로 만들었다. 실제 해상도와는 차이가 있다.😓 처음 작성한 코드 여러 화면 크기로 살펴보세요! 일반 PC 저해상도 PC 일반 태블릿 저해상도 태블릿 body { backgroun..

🌱 코린이를 위한 GUIDE/🗂️ OpenSource

9 CSS로 박스 만들기 (구획 정해주기)

2023.05.31

CSS로 박스 만들기 (구획 정해주기) 긴 말 할 것 없이, 바로 코드로 확인해보자. CSS가 초보라서 구획 설정이 어렵다면, 나처럼 아래의 사이트로 연습을 해보는 것도 좋을 것 같다. 💡 CSS Diner 클릭 코드 box1 box2 box3 * { background-color: gray; } .box1{ border: 3px solid blue; width: 200px; height: 200px; background-color: white; padding: 50px 100px 30px; /*pading top left 등으로 하는게 더 편함 */ margin-bottom: 30px; /*공백*/ } .box2{ box-sizing: border-box; border: 3px solid red; wi..

🌱 코린이를 위한 GUIDE/🗂️ OpenSource

2 순서가 있는 리스트를 작성해보자. <ol> <li> 태그

2023.05.30

순서가 있는 리스트를 작성해보자. 태그 리스트를 간단하게 만드는 태그가 있다. 바로 과 이다. 은 ordered list의 약자이다. 는 list의 약자이다. 이 태그들만 있으면 번거롭게 1,2,3,4를 치거나 a,b,c,d 혹은 ㄱ,ㄴ,ㄷ,ㄹ을 안쳐도 된다! 자동으로 리스트를 설정하는 태그를 배워보자. 📍 참고로, 은 기본적으로는 아라비아 숫자로 표기된다. 태그 안에 type="a"를 쓰면 알파벳으로 기호가 바뀐다. 로 작성하고 태그를 닫아주면 된다는 말이다. 💡 이 궁금하다면? 클릭 코드 양콩이가 행복해지는 방법 리스트 코딩하기 게임하기 유튜브 보기 소설 읽기 맛있는 음식 먹기 블로그에 글 작성하기 영화 보기 결과 See the Pen by Kong Yang (@Kong-Yang) on CodePen.

13 CSS의 미디어쿼리를 사용해서 반응형 웹 페이지 만들기 (화면 크기에 따라 글씨 내용과 색깔이 달라져요)

9 CSS로 박스 만들기 (구획 정해주기)

2 순서가 있는 리스트를 작성해보자. <ol> <li> 태그

티스토리툴바