절대 단위 : 다른 요소들의 크기와 상관없이 항상 동일한 값 : px와 pt가 대표적 : 화면 크기 변해도 항상 동일한 크기이다. 상대단위 : 브라우저를 기준으로 폰트 사이즈가 변화 : %, em, rem, vw, vh 등이 있다. : font-size의 디폴트 값은 100%이다. vw & vh (viewport width & viewport height) : viewport는 웹사이트에서 보여지는 영역으로 1vw = 1%와 같다. : 화면 전체 너비와 높이는 100vw, 100vh이다. : 50vh는 전체 화면 높이의 50% vmin & vmax vmin: 화면에서 너비와 높이 중 짧은 길이를 기준으로 상대 길이 결정 vmax: 화면에서 너비와 높이 중 긴 길이를 기준으로 상대 길이 결정 만약 높이가 ..
CSS는 HTML 문서의 색이나 모양, 출력 위치 등 외관을 꾸미는 언어이다. CSS로 작성된 코드를 스타일 시트라 부른다. 스타일 시트 구성 셀렉터와 태그 셀렉터: CSS 스타일 시트의 이름이나 규칙 스타일 시트 블록 : CSS3 스타일 시트는 중괄호{ }를 이용해 작성 프로퍼티와 값 : 각 스타일은 '프로퍼티: 값'의 쌍으로 표현되며 세미콜론(;)으로 구성 대소문자 구분 없음 : 셀렉터, 프로퍼티, 값은 모두 대소문자를 구분하지 않음 HTML에서 CSS 파일 불러오기 태그 이용 : 에서만 사용 가능하고 종료 태그가 없음. CSS3 규칙 CSS3 스타일은 부모 태그로부터 상속된다 안녕하세요 자식입니다 위의 코드에서 태그는 태그의 자식이다. 태그는 글자 크기를 25px로 출력되지만 부모의 스타일 요소를 ..
CSS에서 여러 다른 태그들 혹은 다른 아이디, 클래스명에 대한 HTML 요소들에 같은 CSS 스타일을 적용할 수 있다. CSS 선택자에서 AND나 OR 같은 선택자를 사용할 수 있다. AND 선택자 사이 공백없이 붙여서 사용하면 여러 선택자를 동시에 만족하는 태그에 스타일을 적용할 수 있다. div#id{ padding: 10px; background-color: violet; } div.class{ margin: 20px; width: 30%; } .class#id{ background-color: blue; } OR : 쉼표를 사용해 두 선택자 중 하나라도 만족할 경우 해당 CSS 효과를 적용할 수 있다. : 여러 개의 태그 등을 쉼표로 연결해 모두 같은 스타일링이 가능하다. #id, .class,..
가상 셀렉터는 HTML 요소의 상태에 따라 스타일을 다르게 적용할 수 있다. :active : 사용자의 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 요소의 스타일 변경 가능 .active-item:active{ background-color: black; } :hover : 마우스가 해당 요소 위에 있을 때 요소의 스타일 변경 가능 .mouse-on:hover{ background-color: orange; } :focus : 마우스가 해당 요소 클릭하면 요소의 스타일 변경 가능 .focus-item:focus{ background-color: green; }
자식 셀렉터 : 부모 자식 관계인 두 셀터를 '>' 기호로 조합한 형태 div > strong { color: blue; } div > div > strong{ color: violet; } 자손 셀렉터 : 자손 관계인 2개 이상의 태그를 나열한 형태 ul strong{ color: blue; } ※ ul, strong과 다름에 주의하자 ul strong{ color: blue; } div > strong { background: orange; } WebProgramming HTML CSS div의 자식 strong의 background: orange로 나타나고, ul의 자손 strong이 color:blue 적용된다. 자식(Child) 필터 :nth-child(n) 부모의 n번째 자식 요소를 선택 :n..
display: grid를 사용하면 가로 세로 방향으로 2차원 적인 레이아웃을 만들 수 있다. ※ display: flex는 한 방향으로만 레이아웃이 가능했다. 먼저 container 안에 item 요소들을 배치할 것이다. 1. container에 display: grid; 추가 이것만 입력하면 아무 일도 일어나지 않을 것이다. 2. container에 grid-template-coulmns, grid-template-rows 지정 : grid-template-columns와 grid-template-rows는 그리드의 형태를 정의한다. .container{ display: grid; grid-template-columns: 10vw 30vw 50vw; grid-template-columns: 1fr 2..
CSS의 flexbox는 기존 웹페이지의 오래된 레이아웃 지정 방식을 발전시켰다. display: flex를 사용할 때와 사용하지 않았을 때 차이 1 2 3 4 #container { width: 100%; height: 20vh; background-color: black; } .item { width: 20%; height: 4vh; margin-bottom: 10px; background-color: orange; } 위와 같이 display: flex를 사용하지 않은 경우 id = "container"인 div 내부에 div item들이 아래로 정렬된 것을 확인할 수 있다. #container { width: 100%; height: 20vh; background-color: black; disp..
Front-End/CSS 2022. 11. 25. 17:32
절대 단위 : 다른 요소들의 크기와 상관없이 항상 동일한 값 : px와 pt가 대표적 : 화면 크기 변해도 항상 동일한 크기이다. 상대단위 : 브라우저를 기준으로 폰트 사이즈가 변화 : %, em, rem, vw, vh 등이 있다. : font-size의 디폴트 값은 100%이다. vw & vh (viewport width & viewport height) : viewport는 웹사이트에서 보여지는 영역으로 1vw = 1%와 같다. : 화면 전체 너비와 높이는 100vw, 100vh이다. : 50vh는 전체 화면 높이의 50% vmin & vmax vmin: 화면에서 너비와 높이 중 짧은 길이를 기준으로 상대 길이 결정 vmax: 화면에서 너비와 높이 중 긴 길이를 기준으로 상대 길이 결정 만약 높이가 ..
Front-End/CSS 2022. 11. 25. 15:51
CSS는 HTML 문서의 색이나 모양, 출력 위치 등 외관을 꾸미는 언어이다. CSS로 작성된 코드를 스타일 시트라 부른다. 스타일 시트 구성 셀렉터와 태그 셀렉터: CSS 스타일 시트의 이름이나 규칙 스타일 시트 블록 : CSS3 스타일 시트는 중괄호{ }를 이용해 작성 프로퍼티와 값 : 각 스타일은 '프로퍼티: 값'의 쌍으로 표현되며 세미콜론(;)으로 구성 대소문자 구분 없음 : 셀렉터, 프로퍼티, 값은 모두 대소문자를 구분하지 않음 HTML에서 CSS 파일 불러오기 태그 이용 : 에서만 사용 가능하고 종료 태그가 없음. CSS3 규칙 CSS3 스타일은 부모 태그로부터 상속된다 안녕하세요 자식입니다 위의 코드에서 태그는 태그의 자식이다. 태그는 글자 크기를 25px로 출력되지만 부모의 스타일 요소를 ..
Front-End/CSS 2022. 11. 24. 17:12
CSS에서 여러 다른 태그들 혹은 다른 아이디, 클래스명에 대한 HTML 요소들에 같은 CSS 스타일을 적용할 수 있다. CSS 선택자에서 AND나 OR 같은 선택자를 사용할 수 있다. AND 선택자 사이 공백없이 붙여서 사용하면 여러 선택자를 동시에 만족하는 태그에 스타일을 적용할 수 있다. div#id{ padding: 10px; background-color: violet; } div.class{ margin: 20px; width: 30%; } .class#id{ background-color: blue; } OR : 쉼표를 사용해 두 선택자 중 하나라도 만족할 경우 해당 CSS 효과를 적용할 수 있다. : 여러 개의 태그 등을 쉼표로 연결해 모두 같은 스타일링이 가능하다. #id, .class,..
Front-End/CSS 2022. 11. 24. 17:02
가상 셀렉터는 HTML 요소의 상태에 따라 스타일을 다르게 적용할 수 있다. :active : 사용자의 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 요소의 스타일 변경 가능 .active-item:active{ background-color: black; } :hover : 마우스가 해당 요소 위에 있을 때 요소의 스타일 변경 가능 .mouse-on:hover{ background-color: orange; } :focus : 마우스가 해당 요소 클릭하면 요소의 스타일 변경 가능 .focus-item:focus{ background-color: green; }
Front-End/CSS 2022. 11. 24. 15:21
자식 셀렉터 : 부모 자식 관계인 두 셀터를 '>' 기호로 조합한 형태 div > strong { color: blue; } div > div > strong{ color: violet; } 자손 셀렉터 : 자손 관계인 2개 이상의 태그를 나열한 형태 ul strong{ color: blue; } ※ ul, strong과 다름에 주의하자 ul strong{ color: blue; } div > strong { background: orange; } WebProgramming HTML CSS div의 자식 strong의 background: orange로 나타나고, ul의 자손 strong이 color:blue 적용된다. 자식(Child) 필터 :nth-child(n) 부모의 n번째 자식 요소를 선택 :n..
Front-End/CSS 2022. 11. 24. 15:15
display: grid를 사용하면 가로 세로 방향으로 2차원 적인 레이아웃을 만들 수 있다. ※ display: flex는 한 방향으로만 레이아웃이 가능했다. 먼저 container 안에 item 요소들을 배치할 것이다. 1. container에 display: grid; 추가 이것만 입력하면 아무 일도 일어나지 않을 것이다. 2. container에 grid-template-coulmns, grid-template-rows 지정 : grid-template-columns와 grid-template-rows는 그리드의 형태를 정의한다. .container{ display: grid; grid-template-columns: 10vw 30vw 50vw; grid-template-columns: 1fr 2..
Front-End/CSS 2022. 11. 24. 15:15
CSS의 flexbox는 기존 웹페이지의 오래된 레이아웃 지정 방식을 발전시켰다. display: flex를 사용할 때와 사용하지 않았을 때 차이 1 2 3 4 #container { width: 100%; height: 20vh; background-color: black; } .item { width: 20%; height: 4vh; margin-bottom: 10px; background-color: orange; } 위와 같이 display: flex를 사용하지 않은 경우 id = "container"인 div 내부에 div item들이 아래로 정렬된 것을 확인할 수 있다. #container { width: 100%; height: 20vh; background-color: black; disp..