🧐 업무를 하는 중.. 퍼블에서 디자인 해서 보내준 페이지와 적용 후 개발 페이지가 디자인적으로 다른 부분이 있는 이슈가 있었다. 나는 발견도 못했던 것을 QA 중 디자인하신 분이 왜 오른쪽 부분에 선이 두개냐고 물어보셔서 이제야 눈치를 챘다ㅋㅋㅋ 역시 보는 관점이 다르긴 하다. css 파일은 받아서 그대로 적용했을 뿐인데 왜 동일하게 적용이 안되나..? 하고 차이점을 보니까 css 에서 last-child를 통해 border-right를 0px로 주어 맨 오른쪽에는 선이 안나오도록 했는데 개발 페이지에서는 그 부분이 적용되지 않아서 선이 하나 더 생겼고, 결과 두 줄로 보이는 현상이 있었다. 왜 last-child가 적용되지 않지..? 하고 찾아보니까 last-child는 마지막 자식 아래에 그냥 아무..

1. 그리드 레이아웃 플렉스 박스 레이아웃에서는 플렉스 항목을 배치할 때 가로나 세로 중에서 하나를 주축으로 두고 배치한다. https://hyejin.tistory.com/143 10-2. CSS 플렉스 박스 레이아웃 (flex-direction, flex-flow, flex-wrap, justify-content, align-content, align-self, align 1. 플렉스 박스 레이아웃 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것이다. 이때 여유 공간이 생기면 너비나 높이를 적절하게 늘이거나 줄일 수 있다. 1️⃣ 플 hyejin.tistory.com CSS 그리드 레이아웃은 그리드 항목을 배치할 때 가로와 세로를 모두 사용한다. 따라서 플렉스 박스 레이아웃..

1. 플렉스 박스 레이아웃 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것이다. 이때 여유 공간이 생기면 너비나 높이를 적절하게 늘이거나 줄일 수 있다. 1️⃣ 플렉스 컨테이너 (부모 박스) : 플렉스 박스 레이아웃을 적용할 대상을 묶는 요소이다. 2️⃣ 플렉스 항목 (자식 박스) : 플렉스 박스 레이아웃을 적용할 대상이다. 3️⃣ 주축 (main axis) : 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향이다. (기본적으로 왼쪽에서 오른쪽으로 수평방향으로 배치한다.) 4️⃣ 교차축 (cross axis) : 주축과 교차하는 방향을 말하며, 기본적으로 위에서 아래로 배치한다. 2. 플렉스 박스 항목을 배치하는 속성 justify-content : 주축 방향의 정렬 방..

1. 반응형 웹 반응형 웹 디자인은 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현하는 것이다. 2. 뷰포트 뷰포트 viewport 란 스마트폰 화면에서 실제 내용이 표시되는 영역이다. 뷰포트는 태그 사이에 태그를 사용해서 작성한다. 뷰포트 단위 1️⃣ vw(viewport width) : 1vw는 뷰포트 너비의 1% 2️⃣ vh(viewport height) : 1vh는 뷰포트 높이의 1% 3️⃣ vmin (viewport minimum) : 뷰포트 너비와 높이 중에서 작은 값의 1% 4️⃣ vmax (viewport maximum) : 뷰포트 너비와 높이 중에서 큰 값의 1% 3. 미디어쿼리 CSS모듈인 미디어 쿼리는 사이트에 접속하는 장치에 따라 특정한 CSS 스..

* 연습문제 1 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 * 연습문제 2

1. animation CSS3의 animation 속성을 사용하면 자바 스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있다. animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임이라고 한다. 1️⃣ @keyframs 속성, animation-name 속성 애니메이션 지점과 이름을 설정하는 속성으로 애니메이션 시작과 끝을 비롯하여 상태가 바뀌는 부분이 있다면 @keyframes 속성을 이용해 바뀌는 지점을 설정한다. 이때 애니메이션을 여러개 지정할 때를 대비하여 animation-name 속성으로 어떤 애니메이션을 사용할지 이름으로 구분한다. animation-name : 이름 2️⃣ animation-du..

1. 트랜지션 transition 트랜지션은 웹 요쇠의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 밖는 것처럼 스타일의 속성이 바뀌는 것을 말한다. 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것을 트랜지션이라고 한다. 2. transtion-property transition-property 속성은 트랜지션 대상을 지정하는 속성이다. 1️⃣ all : 모든 속성이 트랜지션 대상이 된다. 기본값 2️⃣ none : 트랜지션을 하는 동안 아무 속성도 바뀌지 않는다. 3️⃣ 속성 이름 : 트랜지션 효과를 적용할 속성을 지정한다. 3. transition-duration transition-duration은 transtion-property 에서 트랜지션 대상을 지정했다면 다음으로 진행 시간을 지정..

1. transform CSS에서 변형을 적용하기 위해서는 transform 속성을 사용해서 함수이름과 함께 작성해야한다. transform : 함수 - 2차원 변형과 3차원 변형 2차원 변형은 웹 요소를 평면에서 변형한다. (수평으로 이동하거나, 수직으로 이동) 3차원 변형은 x축과 y축에 원근감을 주는 z축을 추가해서 변형한다. 3차원 변형에서 z축은 앞뒤로 이동하고, 보는 사람 쪽으로 다가올수록 값이 커지고 뒤로 갈수록 값이 작아진다. 2. translate() 함수 translate() 함수는 웹 요소를 이동시키는 함수이다. translate() 함수는 x축이나 y축 또는 양쪽 방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동한다. transform : translate(tx, t..

* 연습문제 1 * 연습문제 2 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6

1. 사용자 동작에 따라 반응하는 가상 클래스 사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상클래스 선택자를 사용한다. 1️⃣ : link 가상 클래스 선택자 방문하지 않은 링크에 스타일을 적용한다. 2️⃣ : visited 가상 클래스 선택자 방문한 링크에 스타일을 적용한다. 3️⃣ : hover 가상 클래스 선택자 특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용한다. 4️⃣ : active 가상 클래스 선택자 웹 요소를 활성화했을 때 스타일을 적용한다. 5️⃣ : focus 가상 클래스 선택자 웹 요소에 초점이 맞춰졌을 때 스타일을 적용한다. 2. 요소 상태에 따른 가상 클래스 1️⃣ : target 가상 클래스 선택자 다른 사..

html 태그 작성할 때 속성도 많이 사용하는데 그 속성값에 따라 원하는 요소를 선택할 수도 있다. 1. [속성] 선택자 (해당 속성이 있는 경우) 대괄호 사이에 원하는 속성을 입력하면 된다. 2. [속성 = 속성값] 선택자 ( 지정한 속성값이 있는 경우) 특정 속성값이 있는 요소를 선택하는 [속성 = 속성값] 선택자는 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정하는데 사용한다. 3. [속성 ~= 속성값] 선택자 (지정한 속성값이 포함된 요소-단어별) [속성 ~= 속성값] 선택자는 여러 속성값 중에서 해당 속성값이 포함된 요소를 선택한다. 특정 속성값을 찾는데 편하다. [속성 ~= 속성값] 선택자는 button값과 정확하게 일치하는 요소를 선택한다. 4. [속성 |= 속성값] 선택자 (지정..

특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 한다. 그리고 현재 요소를 기준으로 바로 한 단계 아래 요소를 자식 요소라고 한다. 그 자식 요소의 한 단계 아래는 손자 요소라고 한다. 1. 하위 선택자 하위 선택자 descendant selector 를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 한다. 즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다. 하위 선택자는 공백을 사이에 두고 써주면 된다. 2. 자식 선택자 자식 선택자 child selector는 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자이다. '>' 기호로 표시해 부모 요소와 자식 요소를 구분한다. ❗ 하위 선택자와 자식 선택자의 다른점은 하..