📚 Study/Html, css

CSS의 선택자

개요 CSS는 어떤 태그들에게 스타일 효과를 주는 언어입니다. 그렇다면 어떤 태그에 적용하는지를 정의하는 문법이 필요하게 되는데, 이때의 문법을 선택자 라고 합니다. 선택자 { 속성1: 값1; 속성2: 값2; } CSS는 위 처럼 선택자를 먼저 쓰고 중괄호 {} 안에 속성과 값을 적는 방식으로 이루어져 있습니다. 종류 CSS의 선택자는 다음 3개로 이루어져 있습니다. 태그 선택자 id 선택자 class 선택자 태그 선택자 개요 태그이름 { 속성1: 속성값1; 속성2: 속성값2; } 처럼 사용하며 해당되는 태그 전부에 스타일을 적용시킵니다. 사용법 span { color:#F00; } div { color:#0F0; } id,class 선택자 개요 태그에서 설정한 id나 class 속성에 따라 스타일을 지..

html img 이미지 가져오기 절대경로와 상대경로

html img태그의 src속성 이미지 경로 가져오기에 대한 많은 고민이 있습니다. 다음은 img 태그의 src 속성의 절대경로와 상대경로의 차이와 사용하는 방법을 소개합니다. html 상대경로와 절대경로 img 태그는 src와 alt 두 가지 필수 속성이 있습니다. 그중 src속성에 경로를 지정하여 이미지를 가져올 때 위와 같이 html 코드를 작성 합니다. img 태그는 종료태그가 없기 때문에 이 아닌 태그 안에서 마지막 종료 >에 ./로 닫아 줍니다. 그럼 절대경로와 상대경로의 차이와 사용하는 방법을 소개합니다. 절대경로 파일의 탐색을 위한 접근 경로를 파일 시스템의 루트로부터 시작해 명시해 주는 것을 절대 경로라고 합니다. 인터넷 파일(서버호스트에 업로드된 이미지)의 경우 파일 경로를 전체 url..

[svg] SVG viewBox를 알아보자

목차 SVG란 viewBox란 의미 기본 예시 위치 조정 예시 확대, 축소 예시 SVG란 SVG에 대해서 간단하게 알아보자. SVG란 Scalable Vector Graphics의 약자로 확장 가능한 벡터 그래픽, 다시 말해 크기를 확대하거나 축소할 수 있는, 수학적 함수를 이용해 도형이나 선을 그려서 표현한 그래픽이라고 할 수 있다. 여기서 수학적 함수를 이용해 도형이나 선을 그려서 표현한이라는 의미는 우리가 수학 시간에 배웠던 좌표평선 위의 그려져 있는 그래프 정도로 이해할 수 있다. SVG는 이런 방식을 차용함으로써, 우리가 흔히 알고 있는 jpg, png, gif와 다르게 확대해도 선명도가 떨어지지 않는다. 또한, 도형이나 선으로 구성되어 있어 파일의 용량이 상대적으로 작다. 하지만 svg를 구성..

[HTML] [드림코딩by엘리] HTML의 핵심은 박스 모델이다.

Front를 구성할 때 제일 기초는 박스모델로 전반적인 구조를 잡는다 (Wireframe) 그다음에는 태그들을 달아준다 (이 박스는 어떻게 구상할 것인지) 1. heder섹션, player섹션, info섹션, Upnext 섹션 크게 4개로 나누어진다. icon은 site :https://fontawesome.com/start CSS 디자인은 Material Design Guidelines를 따른다고한다. 2. CSS 연결 css class설정할때는 작게작게 설정 CSS도 박스모델 처럼 위에서붙어 밑으로 꾸며준다.

Font Awesome 사용해서 아이콘 넣는 방법

FontAwesome(폰트어썸)이란? 폰트어썸(Font Awesome)은 웹상에 많이 사용하는 아이콘을 벡터 형태로 제공해주는 서비스이다. 무료버전, 유료버전이 있는데 무료버전에서 제공하는 아이콘만해도 1609가지라 활용도가 높아서 홈페이지에서 많이 사용하고있다. 홈페이지를 만들 때 아이콘을 하나하나 만들지 않고, 코드를 가져다 쓰면 바로 사용할 수 있어서 아주 편리하다. 폰트 어썸에서 제공하는 무료 아이콘 Font Awesome 사용방법 1. 가입후 키트 코드 복사하기 1. https://fontawesome.com/에 접속해서 회원가입 후 로그인한다. Font Awesome The world’s most popular and easiest to use icon set just got an upgrad..

[HTML] <img>요소와 JPEG, PNG, GIF의 차이

index.html에 blog.jpeg 이미지를 표시하기 위해서는 이 이미지의 위치를 index.html로부터의 상대경로로 표시해주어야합니다. ​ 만약 해당 이미지가 서버에 올려져있다면 "http://~~~/images/blog.jpeg" 처럼 url로 절대경로를 표시해줘도 됩니다. ​ 상대경로로 표시해보겠습니다. ​ ​ ​ ​ 위의 img 요소를 해석하면 다음과 같습니다. images폴더안에 있는 blog.jpeg 이미지를 보여줘라. ​ ​ 이미지를 표시할때 사용하는 요소는 인라인 요소이기때문에 혼자서 쓰면 안됩니다. 또한 컨텐츠가 필요없는 빈 요소입니다. ​ 다른 소스들까지 함께 입력을 하자면 다음과 같이 입력되어야합니다. 인라인 요소이기때문에 자립할 수 없기때문에 p태그 안으로 들어가 있습니다. 또..

check box setting

Color, select , select option 해석

Color Setting

Font CSS 해석

[CSS 해석 ] Basic CSS 맨위에 정리

코드 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, em, img, b, i, ul, li,form, label ,option,select,input{ ?? em , b , label은 어디 태그 지? margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; font-family: 'Noto Sans KR','Noto Sans cjk KR', sans-serif;} table{border-collapse: collapse;} body {line-height:1;} ul li{list-style:none;} img,button, input {bo..