C-log

이번 포스팅에서는 캐스케이딩에 관해서 포스팅을 할 것이다. 1부 2부로 나누어서 진행할 것이다. 캐스케이딩은 웹브라우저를 기반으로 이루어져 있는 html을 사용자 즉, 클라이언트가 웹 페이지 디자인에 개입할 수 있는 결정권이 있어야된다는 전제로 존재하게 된다. 예를 들어서 사용자가 눈이 좋지 않아서 자신이 보고 있는 웹페이지의 글씨 크기를 크게 기울 수 있는 것을 말하는 것이다. 더 나아가서 웹페이지를 만드는 사람(author)이 본인이 개발한 웹페이지가 어떤 모습으로 디자인이 될 수 있는지 결정하는 결정권이 필요하다라는 것이다. 따라서 웹브라우저(WEB), 사용자(USER/Client), 저자(author) 3인이 서로 조화를 이루어서 웹을 만들어 간다는 철학을 가지고 웹을 구현할 수 있는 기능으로 이..

이번 시간에는 css의 상속 관계에 관해서 포스팅할 것이다. 선택자를 공부했던 우리에겐 이젠 상속관계에 관한 것은 어려움이 없을 것이다. 상속은 어떤 property 값의 효과를 주게 되면 그 element에 속해 있는 하위의 element가 해당 효과를 이어 받게되는 성질을 상속이라 한다. 상속을 이용하게 되는 이유는 효율적으로 생상하기 위함이다. html,css 코드는 아래와 같다. DOCTYPE html> Document 수업내용 html css js html { border: 1px solid gray; color: tomato; } ul { border: 1px solid gray; color: gray; } #select { border: 1px solid gray; color: aquamar..

이번 포스팅에서는 text의 배치를 조정하는 방법을 알아 볼 것이다. css의 문법을 다루다 보니 그리 복잡한 내용을 담고 있지 않으니 실습 코드를 통해서 빠르게 이해할 수 있을 것이다. html과 css의 코드는 아래와 같다 DOCTYPE html> Document text1 text1 text1 #text1 { text-align: right; border: 1px solid gray; } #text2 { text-align: center; border: 1px solid gray; } #text3 { text-align: left; border: 1px solid gray; } 글자들의 위치들을 지정하는 text-align들의 세가지 문법들이다. right,left,center외에도 start와 e..

*해당 포스팅은 CSS Diner 게임을 통해 다양한 선택자들을 연습하는 게임이다. 강의에서도 해당 게임을 해설해주니 한번 풀어보길 권장한다. 13번 문제가 잘 풀리지 않았는다. 코드는 아래와 같다. 문제는 과 을 삭제 해야한다. 문제는 '+'를 사용해서 형제관계(Sibling)를 선택하는 것인데 이것은 인접한 선택자를 선택해서 문제를 해결하면되는 것이다. 즉, 우리가 선택해야하는 선택자들은 모드 plate를 사이에 두고 있다. 따라서 plate+apple이라고 작성하면 해당 apple들이 모두 사라진다.

*해당 포스팅은 CSS Diner 게임을 통해 다양한 선택자들을 연습하는 게임이다. 강의에서도 해당 게임을 해설해주니 한번 풀어보길 권장한다. 7번 문제가 잘 풀리지 않았는다. 코드는 아래와 같다. 해당 코드에서 bento 태그 안에 있는 orange를 선택해야 한다. 그러기 위해서 class table인 div로 진입하고 bento태그로 진입 후 class small인 orange에 진입을 해야한다. 자세히 보면 class small을 가지고 있는 것은 orange뿐만 아니라 apple도 가지고 있다. 그래서 모든 orange를 선택하고 그 중 .small을 지적해주면 된다. 즉, oragne.small 이렇게 말이다.

이번 포스팅에서는 font-size의 기본적인 단위 px과 em/rem을 알아볼 것이다. px와 em/rem은 절대적이냐 상대적이냐 로 나뉜다. px은 화면에 표시되는 가장 작은 단위이며 상대적인 크기를 가지고 있어 웹 브라우저가 확대가 되어도 크기가 고정된다. 따라서 화면의 크기 변동에 영향을 받지 않기 위해선 px를 사용한다. em은 부모 요소의 글꼴 크기에 따라 상대적으로 크기가 조절되는 것이다. 즉, 부모 자식관계에서 상호적이라는 것을 알 수 있다.예로 들면 부모의 요소의 글꼴 크기가 16px이고 자식 요소에 2em이 되적용이 된다면 자식 요소의 크기는 32px가되는 것이다. rem은 글꼴 크기 기준으로 상대적인 크기를 나타낸다. em과 달리 상속된 부모에게 영향을 받지 않으며 항상 루트의 요소의..

이번 시간에는 가상클래스 선택자(pseudo class selector)를 포스팅 해볼 것이다. 가상 클래스 선잭자는 특정 상태나 특징을 가진 요소를 선택하기 위해 사용되는 CSS 선택자이다. 이러한 클래스는 요소의 상태나 특징에 따라 동적으로 스타일을 적용하는 데 사용된다. 가상 클래스 선택자는 콜론(:)으로 시작하며, 해당 요소의 상태나 특징을 정의하는데 사용된다. 대표적인 예시로는 hover와 같은 것들이 있다. 우선 html태그를 살펴보면 아래와 같다. DOCTYPE html> Document 방문함 방문안함 이것들을 먼저 클릭 했을 때 반응을하는 강상클래스는 아래와 같다. a:active { color: green; } 그리고 우리가 가장 많이 사용되는 hover기능은 아래와 같다. a:hove..

이번 포스팅에선 html의 부모 자식 선택자를 css로 선택하는 방법을 배워 볼 것이다. 여러 방법들이 있고 어떻게 어떤 태그에 접근하냐에 따라 선태자를 선택하는 방식이 달라진다. 우선 html 코드는 아래와 같다. DOCTYPE html> Document HTML CSS JavaScript HTML CSS selector declaration JavaScript 우선 우리는 ul태그의 글자들을 모두 빨간색으로 선택하고 싶다. 그렇다면 stye.css에 아래와 같이 코드를 작성하면 된다. ul li { color: red; } 이렇게 하면 ul의 li코드들이 모두 붉은 색이 될 것이다. 이번엔 ol태그의 li들과 구별 짓기위해서 파란색으로 ol태그에 영역을 구분 짓는 선을 만들고 싶다면 아래와 같이 하면..