CSS 썸네일형 리스트형 [CSS] HTML 16진수 색상코드에 대해 알아보자 HTML 16진수 색상코드란? #65ffba 위 색상코드는 대제목 서식의 색상 코드입니다. HTML 16진수 색상코드는 웹 프로그래밍(프런트엔드)에서 사용합니다. CSS 코드를 작성하면 흔히 볼 수 있는 코드입니다. HTML 코드는 "#"와 6자리 숫자로 되어있습니다. 이 숫자는 16진법의 숫자 시스템입니다. 예를 들면 16진법에서 "FF"는 십진법에서의 숫자 25를 나타냅니다. HTML컬러 코드에서 처음 두 자리의 상징은 빨강의 강도를 나타냅니다. 00는 최솟값이며 FF는 최댓값을 의미합니다. 세 번째와 네 번째는 녹색의 강도를 표현하며 다섯 번째 및 여섯 번째는 파랑의 강도를 나타냅니다. 빨강, 녹색 그리고 파랑을 조합하여 희망하는 컬러를 만들 수 있습니다. ※ RGB란? RGB(적·녹·청)에 의해 .. 더보기 아이콘 무료 사이트 추천 : flaticon 아이콘 이미지가 필요한 경우 개인프로젝트로 자기소개 웹페이지를 만들고 있습니다. 세세하게 보니 수정할 게 많더라고요. 특히 사용자의 입장에서 보기 좋게 디자인을 설정하는 것이 필요했습니다. '네이버 블로그' 라는 텍스트에 링크를 거는 것보다 네이버 블로그 아이콘을 등록해두면 더 보기 좋고 가독성이 있죠. 티스토리 블로그도 마찬가지고요. 포트폴리오에 Spring, Javascript, Python에 해당하는 아이콘 이미지를 넣어두면 이해하기가 쉬워요. 기존에는 font awesome에 들어가서 링크를 복사해왔는데 무료로 사용하다보니 종류가 제한적이었어요. 그래서 더 나은 아이콘 이미지 사이트를 찾아봤습니다. flaticon(플래티콘) flaticon이라는 사이트입니다. font awesome보다 종류가 많.. 더보기 CSS, vh은 무엇일까? px는 많이 봤지만 vh는 첨 봤다. vh는 viewport height를 의미한다. viewport는 사용자가 웹사이트를 볼 때 보이는 영역을 말한다. 뷰포트의 높이는 뷰포트의 세로길이다. vh는 뷰포트의 일정 비율을 나타내기 때문에 웹사이트를 뷰포트에 맞게 반응형으로 만들 때 유용하다. 아래는 코드 예시와 화면모습이다. Hello, World! vh가 50일 때 Hello, World! 정리하면 vh는 뷰포트의 일정 비율을 나타낸다. 100vh면 뷰포트 세로길이 전부를 말하며 50vh면 절반을 뜻한다. px과 비교해보면 어떨까? 만약 뷰포트가 100px이라면 1vh는 1px이다. 뷰포트가 650px이라면 1vh는 6.5px이다. 더보기 CSS 연습 1. border .item { width: 100px; height: 100px; background-color: red; } .container .item:first-child { border: 100px dashed; border-width: 10px; } h1 { border:1px solid red; } h2 { border-bottom: 5px dotted blue; } 2. border-radius div { width: 100px; height: 100px; background-color: purple; margin: 20px; border-radius: 45px; } 3. box-sizing .item { background-color: orange; width: 100px; height.. 더보기 css 연습 1. padding은 요소의 내부 여백을 의미한다. html css .item { width: 100px; height: 100px; background-color: aqua; border: 4px solid red; } .container .item:first-child { padding: 20px; } 2. 결과 3. border를 dashed로 하면 점선이 나온다. .item { width: 100px; height: 100px; background-color: aqua; } .container .item:first-child { border: 4px dashed; } 더보기 CSS 박스 모델 연습 1. 부모 자식 관계 2. 출력하기 .parent { width: 300px; height: 200px; background-color: blue; } .child { width: 100px; height: 100px; background-color: orange; } 파란색이 부모, 노란색이 자손이다. width를 auto로 하면 부모(파란색)의 너비를 따라간다. 3. 픽셀(px)수 보는 방법. 4. 부모 폰트사이즈를 40px로 하자 자손 너비가 40*10(em)=400px이 됐음. 부모요소로부터 글꼴 사이즈를 상속받는다. 5. 단위 - px (픽셀) - 1024 768 -> 가로 픽셀 1024개, 세로 픽셀 768개 있음 - % (상대적인 백분율) - 기준이 있어야함 - 자식요소는 부모요소의 속성값이.. 더보기 CSS 기본 문법 ② 1. 가상 요소 선택자 ABC::before - 선택자 abc 요소의 내부 앞에 내용(content)을 삽입 ABC::after - 선택자 abc 요소의 내부 뒤에 내용(content)을 삽입 2. 속성 선택자 3. gmail 처음에는 div태그로 만들었음. 유지보수 쉽지 않았음. 4. ! important는 가장 우선순위임 Hello Seoul! 순서 !important 인라인 선언 ID 선택자 Class 선택자 태그 선택자 전체 선택자 점수 계산은 왜 하는거지? 더보기 CSS 복습 안녕 아무리 외부스타일시트로 빨간색 배경을 연결하려고 해도 연결이 되지 않았다. 이유는 div영역을 지정해주지 않았기 때문이다. 기초지만 이렇게 헤맨다... 더보기 이전 1 2 다음
