본문 바로가기

Spec UP - Frontend/부스트코스_UI 개발83

미디어 쿼리(Media Queries) Syntax 미디어 쿼리 기호 [ a ] : a가 나올 수도 있고 나오지 않을 수도 있습니다. a | b : a 또는 b 둘 중에 하나를 선택합니다. "|"는 파이프 라인 기호로 키보드의 역슬래시(\) 키를 Shift 키를 누른 채로 누르면 나옵니다. a? : a가 0번 나오거나 1번만 나올 수 있음 a* : a가 0번 나오거나 그 이상 계속 나올 수 있음 media_type : all, screen, print 등 명세에 정의된 미디어 타입 media_feature : width, orientation 등 명세에 정의된 미디어 특성 Syntax를 요약하면 media_query_list (미디어 쿼리 리스트) : 여러개의 미디어 쿼리로 이루어진 리스트로 작성 가능하며, 쉼표를 이용해서 구분합니다. media_quer.. 2020. 3. 31.

미디어 쿼리 소개/미디어 타입(Media types)&미디어 특성(Media Features) 미디어 쿼리 (Media Queries) : 각 미디어 매체에 따라 다른 스타일 시트를 적용할 수 있게 만드는 것. 미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것입니다. 미디어 매체는 모니터와 같은 스크린 매체, 프린트, 스크린 리더기와 같은 것들을 이야기 합니다. 미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해줍니다. 미디어쿼리는 CSS2의 미디어 타입(Media Types)을 확장해서 만들어졌습니다. 미디어타입은 이론적으로는 훌륭했지만, 결과적으로 제대로 활용되지 못했습니다. 이유는 당시에는 미디어 타입을 제대로 지원하는 기기가 없었기 때문입니다. 미디어 쿼리가 등장하기 이전에는.. 2020. 3. 30.

HTML / CSS유효성 검사 https://validator.w3.org/ The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website. validator.w3.org HTML/CSS 코드를 작성하고 나면 항상 유효성 테스트를 실시해야 합니다. 유효성 검사를 통해 마크업 문법상 에러가 없는지 표준에 맞게 작성되었는지 알 수 있고, 사용성과 접근성, SEO 최적화 개선에도 도움이 됩니다. 첨부한 링크는 유효성 검사를 할 수 있는 주.. 2020. 3. 30.

CSS속성_z-index 요소의 위치를 지정하다 보면 부득이하게 두 요소가 겹쳐지게 되는 경우가 있습니다. 결국, 둘 중 하나는 다른 요소로 인해 덮어쓰게 됩니다. 이때 어느 요소가 더 위로 올라와야 하는지는 요소들의 쌓임 순서의 규칙에 따라 위치하게 됩니다. 이것을 정하는 것이 바로 z-index의 역할입니다. 쌓임 순서는 z-index 속성 값을 설정하여 바꿀 수 있습니다. z-index 속성 요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성입니다. position 값이 static이 아닌 경우에 지정 가능한 속성입니다. 순서 값이 없을 경우 생성 순서(코드상 순서)에 따라 쌓이고 number로 속성값 선언 시 큰 값이 가장 위쪽에 쌓여집니다. 부모가 z-index 값이 있을 경우 부모 안에서만 의미.. 2020. 3. 30.

CSS속성_position 요소의 레이아웃을 설정하는 대표적인 속성은 position 속성입니다. position은 요소의 위치를 원하는 곳으로 이동할 수 있게 합니다. position을 사용하기 위해서는 요소를 이동시키기 위한 좌표 속성인 offset에 대해서도 알아야 합니다. position과 offset 속성을 잘 활용하면 더 다양하고 화려한 레이아웃을 구현할 수 있습니다. position 속성 요소의 위치를 정하는 방법을 지정하는 속성입니다. 속성값(static) 1. static : 다른 태그와의 관계에 의해 자동으로 배치 되며 위치를 임의로 설정할 수 없습니다. 2. absolute : 부모요소의 위치를 기준으로 offset에 따라 배치된다.(절대 위치) - 부모가 position 값(static 제외)을 가지면 off.. 2020. 3. 30.

CSS속성_clear floating 요소는 주변 요소들의 배치에도 영향을 줍니다. 그러므로 가끔 주변 요소들이 의도하지 않은 대로 나타날 수 있는데, clear 속성을 사용하여 이 문제를 해결할 수 있습니다. 의도한 게 아니라면 대부분 floating 요소 다음 요소에 바로 clear를 해주는 게 좋습니다. clear는 float과 항상 따라다니는 속성이므로 같이 잘 알아두어야 합니다. clear 속성 요소를 floating 된 요소의 영향에서 벗어나게 하는 속성이며, 블록레벨요소에만 적용 가능합니다. 속성값(기본값:none) 1. none : 양쪽으로 floating 요소를 허용. 2. left : 왼쪽으로 floating 요소를 허용. 3. right : 오른쪽으로 floating 요소를 허용. 4. both : 양쪽으.. 2020. 3. 27.

CSS속성_float 모든 요소는 기본적으로 보통의 흐름에 따라 위에서 아래로, 그리고 좌측에서 우측으로 배치됩니다. 요소 박스의 경계대로 차례대로 배치되며, float 속성은 요소를 보통의 흐름에서 벗어나 독자적인 공간 위에 배치되게 합니다. 주로 레이아웃을 만들면서 영역을 좌우로 분할하여 만들 때 사용하는 용도로 선언합니다. float을 이용하면 주변 요소들과 더욱 자연스럽게 배치될 수 있지만, floating 되지 않은 주변 요소들에도 영향을 주기 때문에 잘 이해하고 사용해야 합니다. float 속성 요소를 float(요소를 보통의 흐름에서 벗어나게함) 시킬지 지정하는 속성입니다. float : 가라앉지않고 물에 뜨다. 떠가다. 속성값 (기본값 :none) 1. none : float 시키지 않음 2. left : 좌측.. 2020. 3. 27.

CSS속성_visibility CSS에서 요소를 숨기는 방법에는 몇 가지가 있습니다. display 속성 값을 none으로 할 수도 있고, 다른 위치 관련 속성들을 이용해서 안 보이게 숨기는 방법도 있습니다. 하지만 요소를 숨긴다는 의미로만 해석하면 가장 명시적인 방법은 visibility 속성을 이용하는 것입니다. visibility 속성 요소의 화면 표시 여부를 지정하는 속성입니다. 속성값(기본값:visible) 1. visible : 화면에 표시 2. hidden : 화면에 표시되지 않고 공간은 차지함. 3. collapse : 셀 간의 경계를 무시하고 숨김(테이블 관련 요소에만 적용 가능) display:none과의 차이점 display:none 요소가 렌더링 되지 않음.(DOM에 존재하지않음) visibility:hidden.. 2020. 3. 27.

CSS속성_display(디스플레이) 모든 요소는 자기가 기본적으로 가지고 있는 display 값이 있습니다. 그리고 그 값에 따라 블록 레벨, 인라인 레벨 등 렌더링 박스의 유형이 결정됩니다. display 속성으로 해당 요소의 렌더링 박스의 유형을 변경할 수 있으며 심지어 렌더링 여부도 결정할 수 있습니다. display 속성을 잘 알아야 요소가 화면에 표현되는 방식을 이해하기 쉽습니다. 블록레벨태그 Block Level 부모 요소의 가로 영역에 꽉채워져 표현되는 태그를 의미합니다. (한 줄에 하나의 요소 표시) 양옆으로 다른 요소가 배치되지못하도록 박스를 생성하므로 박스의 위 아래로 줄바꿈이 생기게 됩니다. 블록레벨 요소는 일반적인 모든 요소를 포함할 수 있습니다. ex: div, h1~h6, p, ul, li, table ... 인라.. 2020. 3. 27.

CSS속성_단어 관련 속성 CSS에는 앞에서 배운 font와 관련된 텍스트에 대한 속성뿐만아니라, 단어에 대해서 어떻게 표현되게 할지 지정할 수 있습니다. 간단하게 보고가자면, 단어의 공백을 어떻게 처리할지, 단어 사이의 간격을 얼마만큼 가질지, 줄 바꿈이 되는 지점은 어디로 둘지 등을 제어할 수 있습니다. white-space 속성 요소 안에 공백을 어떻게 처리할지 지정하는 속성입니다. 속성값(기본값:normal) 1. normal : 공백과 개행을 무시하고, 필요한 경우에 자동 줄바꿈 발생. 2. nowrap : 공백과 개행을 무시하고, 자동 줄바꿈이 일어나지 않음. 3. pre : 공백과 개행을 표현하고 자동 줄바꿈이 일어나지 않음. 4. pre-line : 공백은 무시하고, 개행만 표현. 필요한 경우에 자동 줄바꿈 발생. .. 2020. 3. 27.

이전 1 2 3 4 5 6 7 ··· 9 다음

티스토리툴바