본문 바로가기

📁Web Developing59

VII. 반응형 웹과 미디어 쿼리 - 3. 그리드 레이아웃 개론 웹 사이트의 레이아웃을 정할 때 사이트 전체 디자인이나 일관성을 유지하려면 그리드 레이아웃을 사용해야 한다. 여기에서는 그리드 레이아웃의 특징을 알아보고, 그리드 레이아웃을 만드는 방법으로 플렉서블 박스 레이아웃과 CSS 그리드 레이아웃을 간단히 살펴보겠다. 그리드 레이아웃이란 반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야 한다, 재배치하려면 기준이 되는 레이아웃이 필요한데 이때 그리드 레이아웃을 사용한다. 그리드 레이아웃이란 웹 사이트를 여러 개의 column으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 말한다. 그리드 레이아웃을 사용하면 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할 수 있다. 우리가 자주 이용하는 여러 .. 2022. 6. 13.
VII. 반응형 웹과 미디어 쿼리 - 2. 미디어 쿼리 미디어 쿼리는 반응형 웹 디자인에서 가장 기본적인 개념이다. 사이트에 접근하는 기기의 해상도에 따라 서로 다른 스타일 시트를 적용해 주는 것이다. 미디어 쿼리 알아보기 CSS모듈인 미디어 쿼리(media queries)는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법이다. 미티어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라진다. 예를 들어 웹 브라우저를 전체화면으로 열었을 때와 화면 절반만 차지하도록 열었을 때 레이아웃이 달라지는 사이트들이 있다. 이렇게 사용자가 어떤 크기의 미디어를 사용하는가에 따라 사이트의 형태가 바뀌도록 CSS를 작성하는 방법을 미디어 쿼리라고 한다. 미디어 쿼리 구문 미디어 쿼리는 @media 속성을 사용해 특정 미디어에서 어떤 CSS를.. 2022. 6. 11.
VII. 반응형 웹과 미디어 쿼리 - 1. 반응형 웹 반응형 웹 디자인이란 반응형 웹 디자인은 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해 준다. 모바일 기기를 위한 뷰포트 반응형 웹 디자인에서 기본적으로 알아 둬야 할 것이 뷰포트(viewport)이다. PC에 맞게 제작된 웹 사이트를 모바일 기기에서 보면 모든 내용이 작게 표시된다. 그 이유는 표시되는 픽셀의 차이 때문인데, 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있다. 이때 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역이다. 예를 들어 PC화면에 맞춰서 제작한 사이트를 모바일 기기에서 확인하면 원래 PC화면 크기만큼 표시하므로 글자가 아주 작다. 또한 모바일 사이트에 적합한 사이트를 제작했더라도 정작 스마트폰 화면에서.. 2022. 6. 8.
VI. 트랜지션과 애니메이션 - 3. 애니메이션 앞에서 배운 트랜지션을 잘 활용해도 부드러운 애니메이션 효과를 만들 수 있지만 animation 속성을 이용하면 트랜지션보다 더 쉽게 애니메이션을 만들 수 있다. CSS 애니메이션에서 사용하는 속성 CSS3의 animation 속성을 사용하면 자바스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있다. animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임(keyframe)이라고 한다. 키프레임은 @keyframes 속성으로 정의하고, animation 속성과 그 하위 속성을 이용해서 애니메이션의 실행 시간이나 반복 여부 등을 지정한다. 다음 표는 animation 관련 속성을 정리한 것이다. 이 중에서 자주 사.. 2022. 6. 8.
VI. 트랜지션과 애니메이션 - 2. 트랜지션 앞에서는 단순한 변형을 배웠다. 이번에 배울 트랜지션은 하나의 스타일을 완전히 다른 스타일로 바꾼다. 트랜지션에서는 스타일이 바뀌는 시간을 조절하여 자바스크립트를 사용하지 않고도 애니메이션 효과를 낼 수 있다. 트랜지션이란 트랜지션은 웹 요소의 배경색으 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 바뀌는 것을 말한다. 트랜지션과 속성 CSS3 트랜지션을 실행하려면 표와 같이 여러 가지 속성을 사용해야 한다. 이제부터 트랜지션의 속성을 하나하나 알아보겠다. 종류 설명 transition-property 트랜지션의 대상을 지정한다. transition-duration 트랜지션을 실행할 시간을 지정한다. transition-timing-function 트랜지션의 실행 형태를 지정한.. 2022. 6. 8.
VI. 트랜지션과 애니메이션 - 1. 변형 transform 과 변형 함수 CSS에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성해야 한다. transform: 함수 웹 요소를 이동시키는 변형 함수는 translate()인데, 예를 들어 웹 요소를 x축으로 50px, y축으로 100px 이동하는 클래스 선택자 .photo를 정의하려면 다음과 같이 사용한다. .photo {transform: translate(50px, 100px); } 2차원 변형과 3차원 변형 2차원 변형은 웹 요소를 평면에서 변형한다. 예를 들어 수평방향으로 이동하거나 수직 방향으로 외곡한다. 이렇게 평면에서 변형할 때는 2차원 좌표를 사용하는데, x축은 오른쪽으로 갈 수록 값이 커지고 y축은 아래로 내려갈수록 값이 커진다. 반면 3차원 변형은 2차.. 2022. 6. 7.
V. 고급선택자 - 3. 가상 클래스와 가상 요소 선택자로 스타일을 지정하기 어려운 대상이 있다. 메뉴의 몇 번째 항목을 지정하거나, 단락의 첫 번째 글자만 지정할 경우이다. 이럴 때는 클래스 이름 앞에 콜론을 한개만 붙여 표시하는 가상 클래스와 두개 붙어 표시하는 가상 요소를 사용하면 해결할 수 있다. 사용자 동작에 반응하는 가상 클래스 사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용하자. 다음은 자주 사용하는 가상 클래스 선택자이다. ①방문하지 않은 링크에 스타일을 적용하는 ':link 가상 클래스 선택자' 웹 문서의 링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다. 텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시된다. 이때 링크의 밑줄을 .. 2022. 6. 6.
V. 고급선택자 - 2. 속성 선택자 태그 안에서 사용하는 속성값에 따라 요소를 선택 하는 역할을 한다. [속성] 선택자 : 특정 속성이 있는 요소를 선택 HTML 태그를 작성할 때 여러 가지 속성을 함께 사용한다. 그 속성값에 따라 원하는 요소를 선택할 수도 있다. 이때 사용하는 것이 [속성] 선택자인데, 대괄호 사이에 원하는 속성을 입력하면 된다. 예를 들어 a 요소 중에서 href 속성이 있는 요소를 선택하려면 다음과 같이 작성한다. a[herf] { ...... } a tag 1 a tag 2 a tag 3 [속성=속성값] 선택자 : 특정 속성값이 있는 요소를 선택 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때 사용. 이 형식은 대괄호 안에 속성과 속성값을 넣고 그 사이에 '=' 기호를 표시. 예를 들어 a 요소 중.. 2022. 6. 6.
V. 고급선택자 - 1. 연결 선택자 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지를 지정한다. 선택자를 둘 이상 조합하므로 '조합 선택자' 라고도 하고 '콤비네이션 선택자' 라고도 부른다. 하위 선택자와 자식 선택자 : 하위 요소에 스타일을 적용 특정 요소를 기준을 그 안에 포함된 요소를 하위 요소라고 한다. 그리고 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소라고 하며, 그 자식 요소의 한 단계 아래는 손자 요소라고 한다. -하위 선택자 하위 선택자를 사용하면 해당 부모 요소에 포함된 해당 하위 요소를 모두 선택하며 자손 선택자라고도 한다. 하위 선택자는 상위 요소와 하위 요소를 공백으로 구분한다. 상위요소 하위요소 먼저 하위 선택자를 사용하는 방법을 알아보자. 다음과 같이 section 요소 안에 포함된.. 2022. 6. 6.
IV. 배경꾸미기 - 3. 그라데이션 효과로 배경 꾸미기 선형 그라데이션 색상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것을 말한다. 이것을 만들어 주는 함수는 linear-gradient인데 색상이 어느 방향으로 바뀌는지, 어떤 색상으로 바뀌는지 알려 주어야 한다. 선형 그라데이션의 기본형은 다음과 같다. linear-gradient(to 또는 , , [, ... ]); -방향 그라데이션 방향을 지시할 때는 끝 지점을 기준으로 to 예약어와 함께 사용한다. to 다음에는 방향을 나타내는 예약어를 최대 2개까지 사용할 수 있다. 이때 예약어는 수평 방향을 나타내는 left와 right, 수직 방향을 나타내는 top과 bottom을 사용한다. 예를 들어 색상이 왼쪽에서 오른쪽으로 변하는 그라데이션이라면 to right로 사용한다. 그리고 왼쪽 아래에서.. 2022. 6. 6.
IV. 배경꾸미기 - 2. 배경 이미지 지정하기 background-image : 배경 이미지 넣기 웹 요소에 배경 이미지를 넣을 때 기본으로 알아 둘 속성은 background-image이다. 다음 기본형과 같이 url()에 이미지 파일 경로를 넣어서 사용한다. background-image : url('이미지 파일 경로') 이미지 파일은 *.jpg, *.gif, *.png 형식을 사용하며 파일 경로에는 작은 따옴표나 큰 따옴표를 붙인다. 파일 경로는 현재 웹 문서를 기준으로 상대 경로를 지정할 수도 있고, http://로 시작하는 절대 경로를 사용할 수도 있다. 배경을 넣을 때 요소보다 이미지 크기가 작으면 이미지가 가로와 세로로 반복되면서 요소의 배경을 가득 채운다. background-repeat : 배경 이미지의 반복 방법을 지정 배경 이미지.. 2022. 6. 5.
IV. 배경꾸미기 - 1. 배경색과 배경 범위 지정하기 background-color : 배경색을 지정 지금까지 우리가 색상을 지정한 방법 그대로 background-color 속성을 활용하여 배경색을 지정할 수 있다. 글꼴이나 글자 크기 등은 태그 선택자에 지정하면 문서 전체에 상속되었었다. 하지만 예외로 background-color 값은 상속되지 않는다. 기본적으로 모든 웹 문서 요소의 배경은 투명하므로 body 스타일로 지정한 문서 배경이 그대로 비치는 것일 뿐 웹 요소에 배경색이 상속된 것은 아니다. background-clip : 배경색의 적용 범위를 조절 배경을 넣고 싶은 요소마다 속성을 입력하면 되지만 박스 모델 관점에서 배경의 적용 범위를 조절할 수도 있다. 즉, 박스 모델의 가장 외곽인 테두리까지 적용할 지, 테두리를 빼고 패딩 범위까지 적.. 2022. 6. 4.
III. 박스 모델 - 5. 웹 요소의 위치 지정하기 left, right, top, bottom : 웹 요소의 위치를 정하는 속성 먼저 웹 문서에서 요소를 원하는 곳에 갖다 놓으려면 위치를 지정할 수 있어야 한다. 이때 사용하는 속성이 left, right, top, bottom이다. 즉 position 속성으로 기준 위치를 정한 뒤 요소의 위치를 left, right, top, bottom 속성에서 선택하고 속성값을 지정하면 된다. 종류 설명 left 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정 right 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정 top 기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정 bottom 기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정 다음 예제는 left, rig.. 2022. 6. 4.
III. 박스 모델 - 4. 웹 문서의 레이아웃 만들기 display : 배치 방법을 결정 display 속성을 사용하면 블록레벨 요소아 인라인 레벨 요소를 서로 바꿔서 사용할 수 있다. display 속성은 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수도 있다. display 속성에서 사용할 수 있는 값은 매우 많은데, 이 중에서 문서 레이아웃을 만들 때 자주 사용하는 속성은 다음과 같다. 종류 설명 block 인라인 레벨 요소를 블록 레벨 요소로 만듭니다. inline 블록 레벨 요소를 인라인 레벨 요소로 만듭니다.. inline-block 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있습니다. none 해당 요소를 화면에 표시하지 않습니다. .. 2022. 6. 4.
III. 박스 모델 - 3. 여백 조절하기 margin : 요소 주변의 여백을 설정 margin은 요소 주변의 여백을 의미한다. 따라서 마진을 이용하면 요소와 요소 사이 간격을 조절할 수 있다. 지금까지 배운 속성과 마찬가지로 마진도 박스 모델의 네개 방향에 한번에 똑같이 지정할 수 있고, margin 다음에 하이픈을 넣고 위치를 나타내는 예약어 top, right, bottom, left를 사용해서 특정 방향에만 지정할 수도 있다. margin: | | auto margin 속성에 속성값을 하나만 지정하면 모든 방향에 동일한 마진이 적용되고, 여러개라면 top-right-bottom-left 순서로 적용된다. 크기값으로는 px이나 em같은 단위로 정할 수 있다. margin 속성을 사용하여 웹 문서를 가운데 정렬하기 일단 배치할 요소의 너빗값이.. 2022. 6. 4.

티스토리툴바