ohjungho 님의 블로그

구조적 가상 클래스구조적 가상 클래스(structural pseudo classes)는 CSS에서 id, class 등의 선택자를 사용하지 않고 요소를 선택할 수 있다. 이렇게 하는 이유는 코드를 효율적으로 작성하기 위함이다. 학교에서 수학 문제를 앞에 나와서 풀 사람을 구할 때 선생님께서 이름을 부를 수도 있지만 번호로 부를 때도 있는 것처럼 태그도 id나 class 같은 이름이 아니라 가상 클래스로 불리는 것이다. 대표적인 구조적 가상 클래스는 first-child, lats-child, nth-of-type, only-of-type이다.  first-child를 학습할 때 개념에서 혼란이 왔다. 개념 자체는 어렵지 않지만 나는 학습을 할 때 원리와 이해를 바탕으로 하기 때문에 문장을 이해하고 코드를..

CSS에서 애니메이션이란 움직이는(변화하는) 효과를 의미한다. 예를 들어 CSS 애니메이션으로 요소의 스타일(글자 색, 이미지 위치 등)에 변화를 줄 수 있다. CSS에서는 전환, 변형, 키프레임으로 애니메이션을 구현한다. 즉, 내가 만드는 웹, 앱 페이지에 움직임을 줄 수 있다. 전환전환(transition) 은 시간에 따른 상태를 지정하는 애니메이션이다. 대표적인 장점은 형태의 변형을 부드럽게 만들어준다는 점이다. 즉, 부드럽고 점진적인 애니메이션을 만들려면 움직임을 줄 때 전환을 사용해야 한다. 예를 들어서 hover 상태에서 배경색을 바꿀 때 아무 설정이 없다면 색이 갑자기 바뀐다. 하지만 전환을 사용하면 색이 서서히 바뀌면서 사용자에게 더 좋은 경험을 줄 수 있다. 전환에는 2가지의 필수 속성과..

자식이 부모가 될 수 있다자식이 자라서 부모가 되는 것처럼 CSS에서도 자식이 부모가 될 수 있다. 예를 들어 div 태그에 텍스트를 넣으면 div 태그가 부모가 된다. "자식이 부모가 될 수 있다" 개념은 HTML 구조와 CSS 스타일링이 결합될 때 발생하는 컨테이너와 자식 요소의 관계를 설명할 때 자주 사용된다. 부모와 자식의 기본 관계HTML 구조에서는 기본적으로 부모-자식 관계가 태그를 중첩하여 생성된다. Hellodiv : 부모 요소span : 자식 요소부모는 자식의 배치와 스타일링에 영향을 줄 수 있고, 반대로 자식도 부모의 레이아웃 계산에 기여할 수 있다. flexbox가 부모-자식 관계를 변화시키는 이유CSS에서 display: flex;는 부모 요소가 플렉스 컨테이너가 되도록 만든다. ..

flex box의 등장플렉스는 '유연한' 이란 뜻을 가지고 있다. 화면 레이아웃을 유연하게, 자유자재로 배치할 수 있게 해준다. 기존에 사용했던 블록 레벨 요소, 인라인 레벨 요소 방식보다 훨씬 강력하고 편리한 기능이 많다. 즉, 다양한 레이아웃을 만들고자 고안된 기법이 플렉스 박스(flex box) 이다.  flex가 필요한 순간??flex는 언제 필요로 할까??? 아래와 같이 body안에 div로 사각형 세 개를 만드는 코드가 있다. div { width: 200px; height: 200px; background-color: tomato; }#second { background-color: seagreen; } HTML 코드에서 1 body를 부모로,..

CSS 배치 속성과, 반응형 디자인에 대해 알아보자. 우선 h1태그와 span태그로 텍스트를 작성한 코드는 아래와 같다. Emotion SAD HAPPY LOVE  Live Server를 통해 확인하면 아래 사진과 같은 결과물이 나온다. Live Server는 확장 프로그램으로, 웹 개발자들이 HTML, CSS, JavaScript 등의 파일을 브라우저에서 실시간으로 미리 보기 할 수 있게 해주는 도구이다.h1 태그로 제목을 Emotion으로 지정했고, SAD, HAPPY, LOVE는 span 태그로 줄 바꿈을 하지 않고 구문 요소를 의미한다. 코드에서는 Emotion, SAD, HAPPY, LOVE 모두 Enter키를 이용해서 각자 다른 줄에 있는데 왜 사진에서 Emoti..

CSS는 Cascading Style Sheets의 약자이다. HTML이 정보를 표현한다면 CSS는 HTML 문서를 시각적으로 꾸미는 역할을 한다. HTML 문서를 시각적을 꾸미는 언어, 왜 HTML에 꾸미기 기능을 넣지 않고 CSS를 별도로 만들었을까? HTML 코드와 꾸미기 코드를 분리하면 가독성과 효율성 모두 높아지기 때문이다. 예를 들어 HTML 페이지에 구조 코드와 꾸미기 코드를 모두 작성하면 둘이 뒤섞이게 된다. 꾸미기 효과를 변경하려면 HTML 이곳 저것을 뒤져 일일이 수정해야 한다. 하지만 꾸미기 코드를 분리하면 꾸미기 코드 관리가 쉬워지고 HTML은 구조 자체에 집중할 수 있다.그래서 꾸미기 코드인 CSS를 만든다. 결과적으로 CSS는 꾸미기를 담당한다. 읽기 종혹 사후관리가 편한 코드를..

HTML 태그태그를 표시하는 방법은 총 두 가지이다.첫 번째는 시작 태그와 종료 태그가 모두 있는 형태이다. 태그와 태그 사이에 요소가 놓이게 된다. 요소  두 번째는 닫는 태그가 없는 형태이다. 이를 자체 닫기 태그(self closing tag)라고 부른다. img, input, link 등이 있다.  대표적인 태그h : 제목 태그br , p , div, span : 순서대로 줄 바꿈(br), 문단 지정(p), 영역 지정(div), 범위 지정(span)link : 현재 문서와 외부 소스를 연결해 주는 태그img : 이미지를 나타내는 태그form : 폼(입력 양식)을 만드는 태그button : 버튼을 만드는 태그ol, ul, li : 리스트를 만드는 태그 h 태그h 태그는 heading의 첫 자를 따서..

웹을 알려면 먼저 네트워크와 인터넷을 알아야 한다. 네트워크는 컴퓨터와 컴퓨터를 연결해 주는 망이다.이런 망들이 모여서 더 큰 네트워크인 인터넷이 되는 것이다!! 인터넷 >> 네트워크 >> 컴퓨터 그렇다면 웹은 뭘까? World Wide Web의 줄임말로, 인터넷에 연결된 사용자들이 서로 정보를 공유할 수 있는 서비스이다. WWW 혹은 W3 이라 부르는데, 보통은 '웹'이라고 부른다. 여기서 말하는 서비스는 텍스트, 그림, 소리, 영상 등의 정보를 제공해 주는 것을 말한다. 웹 페이지란웹 페이지는 정보를 하이퍼텍스트라는 특별한 양식으로 제공하는 웹 문서이다. 브라우저에서 www.naver.com 에 접속하면 네이버에서 제공하는 기본 화면을 가져온다. 이때 보여준 기본 화면이 네이버 기본 웹 페이지이다. ..