본문 바로가기

UIUX Web Standard

Flexbox Layout 레이아웃을 정리할 때 사용하는 속성으로 flex를 소개한다. flex는 블록속성의 박스를 만들어 준다. 레이아웃을 정리 할때, 브라우저에서 긴 레이아웃을 정리 할때 보통 스크롤을 내려서 볼 수 있도록, header, section, footer, div(구) 등의 순서가 아래로 내려오도록 정리했다. 이러한 태그들은 블록속성을 가지고 있기 때문에 자연스럽게 아래로 내려가는 수직구조를 만들어 준다. 블록 속성을 가진 태그들은 row 전체를 차지 하기 때문이다. 이러한 블록 속성으로 인해 세로로 떨어지는 수직구조를 작성 할 때는 어려움은 없지만, li태그를 이용한 가로 배치 메뉴 등을 만들거나, 3단, 4단 등의 배치를 하는 레이아웃은 float:left나, display:inline-block(여백이 생김).. 더보기
css 위치와 공간 해석 - float float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져나와 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. float 은 left, right, none, static 등으로 속성값을 부여할 수 있다. float:left는 원래 좌측으로 보내라는 의미로 흔히 받아들이고 있다. 그렇다고 해서, float을 위치를 지정하는데 사용한다고 무조건 해석하면 무리가 있을때가 있다. float:left는 이미지와 같은 요소의 옆에 글씨를 작성했을 때, 아래 그림처럼 글씨가 이미지의 하단에서부터 시작하게 되는데, 이를 이미지와 같은 높이에서부터 시작하도록 하기 위해 사용하는 속성이라고 할 수 있다. 아래 첫번째 그림처럼.. 더보기
css 공간의 이해 3 - margin collapsing 블록속성을 가진 요소를 자식으로 가지고 있는 부모요소는 margin이 생기지 않는다. 예를 들면, h태그는 위아래 margin을 가지고 있는데, 부모요소인 container3에 배경색을 넣고 보면, 자식요소인 h1에 margin이 표현되지 않은걸 확인할 수 있다. 이때, 부모에 overflow:hidden이나, 이 방법 외에도, display:flow-root를 적용하면, 자식요소인 h1의 margin이 표현되는 걸 확인 할 수 있다. 1. HTML 부분 box3 2. CSS 부분 .container3{ background: #f00; /* overflow: hidden; */ display:flow-root; } h1{ background: #fee; } 이처럼, 자식요소의 공간에 float, marg.. 더보기
css 공간의 이해 2 - - margin collapsing margin은 겹침현상이 생긴다. margin이 적용된 부분이 겹치게 되면 두번 모두 적용되는 게 아니라 한번만 적용된다. 1. HTML 부분 box2 box2 2. CSS 부분 .container2{ background: #8887a1; width:300px; overflow: hidden; } .box2{ width:200px; height:200px; background: #f80; margin:20px; } 이미지 첨부 예정~! 더보기
css 공간의 이해 1 - BFC 1. block formatting context 블록 속성을 가진 자식 요소에 float 을 부여하게 되면, 부모 요소는 자신의 높이값을 잃게 된다. 부모는 자식을 포함하므로, 자식의 높이값을 모두 품을것이라고 생각 할 수 있지만, 모든 요소에 해당하지는 않는다. 아래 사이트에 여러가지 예가 정리 되어 있으니 참조바람, 대표적으로 float 속성을 가진 자식요소가 있을때이다. float은 원래 이미지와 문단의 정렬을 위해 사용하는데, 이미지를 좌측, 이미지를 감싸고 문단의 내용이 들어가게 하게 정렬이 된다. 이렇듯, 부유하는 속성을 가진 float 이 적용된 요소의 부모요소는 자식요소 의 높이값을 포함하지 않게 되는데, 이럴때 문제점~!! 1. 배경에 적용한 색상이나 배경이미지가 잘리는 경우 2. 다음.. 더보기
coding tip - 2. about margin & overflow(BFC) 1. BFC : Block Formatting Context BFC 의미 : overflow는 새로운 body가 생기는것처럼 독립적인 문서가 시작된다. 자식요소에 float이 들어가면 부모는 높이를 갖지 못한다. float의 개념때문인데, (부유함)이때 overflow:hidden을 주는것이 이 때문. 1-1. 안에 있는p태그의 시작점은 container의 시작점과 같다. 이때가장 쉬운 방법: margin을 적용하여 .left와 떨어뜨린다는 점이 있는데, overflow:hidden은 부모의 높이를 유지하려고 만든 속성은 아니다. 그러나 float와 같이 쓰일때, 높이 유지의 문제해결을 할 수 있다. 왜일까? float는 위로 뜬다. 부모입장에서 float의 높이를 인지하지 못한다. body는 최상위 요.. 더보기
coding tip - 1. about vertical-align vertical-align: middle/baseline은 서체의 기본 위아래 여백에 의해 유동적일 수 있다. 그러나, vertical-align: top;은 변수가 좀 적다. 영어의 베이스라인은 세로정렬이 어느정도 비슷하지만, 한글은 초-중-종성을 모두 갖고 있어 좀 더 유동적이다. 그래서 되도록 상단을 기준으로 여백을 맞춰 주는 게 좋고, 오류를 최소화 해준다. 이렇게 vertical-align을 사용해서 세로간의 기준을 맞춰주고, 조금씩 서체의 여백에 의해 생기는 간격은 브라우저를 확인하면서 margin으로 정리한다. 인라인 텍스트 여기는 새로운 badge입니다. body{background: #eee;font-size: 3.0em;} .container{background: #fff; color:.. 더보기
웹표준 검사 웹표준 검사를 HTML과 CSS 각각 진행해 본다. HTML문서에 대한 validator 검사를 진행하면 아래와 같은 그림처럼 나온다. 그리고 하단에 아이콘이 생성되고, 코드를 복사해서 문서에 첨부 하면 된다. validator.kldp.org/ The W3C Markup Validation Service 파일 업로드로 유효성 검사 주의: Windows XP SP2 의 몇몇 IE 에서는 업로드가 되지 않을수도 있습니다. 이 경우에는, W3C QA 사이트의 information page 를 참고 하십시오. 직접 입력하여 유효성 검사 validator.kldp.org css-validator.kldp.org/ W3C CSS 검사 서비스 파일 업로드를 통한 검사 직접 입력을 통한 검사 css-validator.. 더보기
레이아웃 기초 1 HTML Mark up은 아래 코드를 참고 한다. HTML5 시멘틱 태그로 구조를 정리하고, 문서 전체에 가로축 반복 배경이미지는 body에 넣을 예정이라, 태그를 별도로 넣지 않았다. menu menu menu menu menu 첨단기술과 새로운 솔루션으로 고객의 기대를 앞서가는 기업 끊임없는 혁식을 통해 경쟁기업보다 첨단기술과 소재를 개발 제공합니다. 제품개발과 판매 뿐만 아니라 개별 고객이 필요로 하는 것을 찾아 문제를 해결해 주는 적극적인 가치를 창출하고 제공합니다. 경영에서 신뢰 받는 기업 열린경영을 통해 고객, 주주, 구성원의 소리를 경청하고 정직과 신의로 대응하여 Win Win 하는 동반자 관계를 구축한다. 구성원 개개인을 존중하여 성장기회를 부여하는 신바람 나는 직장을 만들어 나갑니다. F.. 더보기
img의 배치 활용 레이아웃이라 하기엔 너무 단순하지만, 이미지를 여러개 두었을 때 생기는 여백에 대해 정리하고자, 아래와 같이 문서를 만들어 보도록 한다. 여기서 핵심 속성은 img{vertical-align: top;} 이미지태그는 이미지 자체가 크기를 가지고 있기 때문에 블록인지 인라인인지 잘 구분하기 어려울 수 있다. 1. 이미지 태그에 있어 기억할 점 : img태그는 inline속성을 갖고 있어 한 줄에 다음 요소가 이어서 오게 된다. img태그는 아래 그림처럼 바로 다음에 오는 요소가 이미지의 우측 하단부터 오기 시작한다. Lorem ipsum dolor sit amet, consectetur adipisicing elit. 즉, 태그 안에 있는 여백들이 공백태그로 작동하여, 브라우저마다 적용되는 기본 글자의 여.. 더보기
css animation animation속성을 이용해 css에서도 애니메이션이 가능하다. 주로 transform의 속성인 크기, 위치값, 회전, 색상, 투명도 등에 애니메이션을 사용한다. 속성 속성값 설명 animation-name ani(직접 지어주는 이름) 애니메이션의 이름을 지정 animation-duration 2s 애니메이션 재생 시간(s) animation-timing-function 기본값 : ease linear | ease-in | ease-out | ease-in-out ... 애니메이션 가속도(ease) 출발이나 도착지점에 빠르기를 지정하는 속성 animation-delay 2s 애니메이션 지연 시간(s) 일정 시간 이후, 애니메이션이 재생되도록 함 animation-iteration-count number.. 더보기
:focus selector - 2 2단, 3단 레이아웃에서도, 문서의 길이가 길 때 :focus와 앵커링크를 활욜하여 tap키로 문서의 위치를 이동할 수 있다. skip메뉴를 이번에는 ul>li로 정리해 보았다. skip 하위에 있는 ul>li>a요소 안에는 href속성 값으로, 문서 안의 이동할 위치에 부여한 id값을 적어주어 문서 내에서의 이동을 할 수 있는 앵커링크를 만든다. ※ 핵심내용 : 1. 위의 레이아웃 모양 정리 2. skip a안에 anchor link값 넣기 See the Pen :focus selector 2 by LimsUIUX (@LimsUIUX) on CodePen. 더보기
:focus selector - 1 focus선택자는 포커스가 있는 요소를 선택 하는데 사용하며, 일반적으로 키보드이벤트(tap키 등)을 허용하는 요소에 주로 쓰인다. :focus { css declarations; } css만으로 skip메뉴를 만들어 볼 수 있다. 메뉴를 상단에 고정하도록 css를 만들어 주고, 안보이게 한 다음, (여기서는 dl>dt+dd를 사용하영 skip메뉴를 만들고, dt는 안보이도록 css를 설정해 두었다. ) :focus에 앵커링크를 연결하도록 한다. See the Pen :focus selector by LimsUIUX (@LimsUIUX) on CodePen. 더보기
multi-column multi column은 문단을 다단으로 편집하는 속성이다. 속성 속성값 설명 column-count number 다단의 개수 column-gap px 다단 사이의 간격 column-rule-style solid | dotted | double 구분선의 종류 column-rule-width px 구분선의 두께 column-rule-color color 구분선의 색상 column-rule solid 1px #333 short hand column-span all 다단 안의 요소를 다단편집에서 해제시킴, column안에 h2태그가 있을때, h2 { column-span: all; } column-width px | % 브라우저에 대한 최소 너비를 지정함 즉, 브라우저가 작아질때, 단의 최소 너비 column.. 더보기
가시속성을 활용한 서브메뉴 앞서 살펴 본 가시 속성을 활용해서, 메인메뉴에 마우스를 올리면, 서브메뉴가 나오고 메인메뉴와 서브메뉴에서 마우스를 떠나면, 서브메뉴가 사라지도록 함 주요 개념 : 공간의 크기속성 height:0 --> height:auto 가시 속성 : opacity:0 과 overflow:hidden --> opacity :1, ※ 주의할 점 : .sub_menu에 가시속성 중 opacity를 0으로 적용했다가, #main_menu>li에 hover하면, opacity:1로 나타나게 함. 여기에 height:0으로 적용해서, 아예 공간의 크기도 없애 버리는데, .sub_menu의 하위요소인 li가 블록속성 공간을 차지 하므로, .sub_menu에 height:0을 주더라도, 자식인 li는 공간이 남아 있게 됨. 따라.. 더보기
가시속성 가시속성은 보이는지 안보이는지를 정해주는 속성이다. display, opacity, visibility 로 각각 공간을 차지 하는지 아닌지다 다르므로, 작성해 보도록 한다. 이 외에도, 넘치는 부분에 대한 가시속성인, overflow : auto | hidden | scroll 이 있다. 속성 속성값 설명 display none | block 내용, 공간이 삭제됨 opacity 0~1 내용 안보이고, 공간 유지 visibility hidden 내용 안보이고, 공간 유지 overflow hidden 감싸는 요소의 크기를 넘치는 부분은 안보이게 함, 넘치는 공간 삭제됨 111 222 333 444 555 666 777 더보기
transform, transition 속성 ※ transform 속성의 의미 : css코드로 요소를 변형하는 속성이다. 속성 속성값 속성값사용 설명 transform translate translate(50px,40px) x,y 축으로 위치 이동 translateZ translateZ(-300px) z축으로 위치 이동, 원근감이 생기므로 부모요소에 perspective와 함께 작성 rotate rotate(-30deg) 시계방향(+), 반시계방향(-)으로 회전 scaleX scaleX(1.5) 가로축의 비율 scaleY scaleY(0.7) 세로축의 비율 skewX skewX(-30deg) X축으로 기울기 skewY skewY(-15deg) Y축으로 기울기 matrix matrix(.4,1,0,1,20,40) scaleX, scaleY, skew.. 더보기
ankor link 2 - 외부 문서 내 특정위치로 이동 앞서 a태그의 href속성에 아이디 값을 붙여 문서 내에서 특정 장소로 이동하는 것을 만들어 보았다. 외부 문서의 특정 장소로 이동하는 방법은, href 속성에 외부문서링크와 #아이디명을 붙여서 적는다. 1. 문서 내에서 이동하는 방법 : 링크태그에 아래와 같이 작성한다. A로 가기 문서 내에서의 이용 A로 가기 B로 가기 C로 가기 문서의 A 문서의 B 문서의 C Top 2. 외부문서의 메뉴에서 다른 문서 내의 링크로 이동 : 외부문서의 메뉴에 링크는 아래와 같이 작성한다 . A로가기 외부문서의 앵커링크 메인문서의 A로가기 메인문서의 B로가기 메인문서의 C로가기 위와 같이 작성하면, 메뉴를 누르면 main문서의 해당 아이디로 이동하게 된다. 더보기
anchor link 1 - 문서 내 이동 a 태그는 href 속성값에 의해 문서간의 이동이 가능하다는 것을 알고 있다. href속성값에 다른 문서로의 이동이 아닌, 자신의 문서 안에서 다른곳으로 이동시키고자 할때, 이동 될 박스에 id값을 주고, a 태그의 href속성에는 #target1이라는 속성값을 적용한다. (예 : target1으로 바로가기 ) 그리고 나서 같은 문서 안의 박스에 아이디값을 부여한다. (예 : ) 하나의 본문에서 id속성이 부여된 박스에 바로 가게 할 수 있는 것을 anchor link라고 한다. See the Pen yLNvJrW by LimsUIUX (@LimsUIUX) on CodePen. [림스Tip1] 다른 문서에서 본문의 target1로 이동하고자 할때는 타겟문서의 target1으로 이동 라고 적는다. [림스T.. 더보기
html5를 활용한 기초 레이아웃 See the Pen VwLyXva by LimsUIUX (@LimsUIUX) on CodePen. !!! 포인트 1. body태그에 좌측 여백을 둔다. 2. body태그에 배경이미지를 넣는다. body{ background-image:url("img/living.gif"); background-repeat: no-repeat; background-position: 0 50px; background-size: contain; margin-left:280px; margin-top:50px; } 3. 메뉴 정리는 ul>li>a로 하되 - a태그에 크기를 넣기 위해 display : inline-block으로 지정 - 우측테두리를 넣고, 마지막 요소만 따로 선택자로 가져와 테두리 없앰 4. li에 list-s.. 더보기
position 속성 2 - 활용 position을 활용하여 큰 틀을 만드는 레이아웃을 정리해 보도록 한다. LOGO topmenu gnb menu main img content footer 공간의 크기는 width와 height 뿐만 아니라, padding, border, margin을 활용하기도 한다. 여기에서는 height로 높이를 주는 대신 padding을 활용하여 높이가 생기도록 하였다. 위의 padding대신 height값을 부여해도 좋다. 이때, 글자가 높이의 가운데 오도록 하기 위해 line-height를 height와 같은 높이값을 부여해도 된다. 더보기
position 속성 1, z-index ※position 특징 위치를 정해주는 방법 중 하나로, 조상(부모)와 자식간의 관계에 의한 위치속성이다. 속성 속성명 설명 position static 기본값 absolute 부모나, 조상요소에 대해 위치값을 부여받는다. 위치지정속성인 top, left, right, bottom의 값을 함께 적는다. fixed 브라우저에 대해 절대 위치값을 갖게 된다. 위치지정속성인 top, left, right, bottom의 값을 함께 적는다. relative 코딩의 흐름에서 자신이 갖는 위치가 기본값이며, 이를 바꾸고 싶을 때는 "left:20px" 처럼 값을 더 부여한다. 그러면 원래 자기의 위치에서 좌측으로 20px 들어가서 위치한다. -----------------------------------------.. 더보기
float 속성 3 - 레이아웃 연습 1~5 이번에는 float 속성을 활용한 박스 정리를 해 보도록 한다. 레이아웃을 위해 정리하는 방법이기도 하다. (최근 flex, grid 등이 대두되기 때문에 이를 활용하는 방법은 앞으로 정리해 나가도록 하겠다.) 위치와 여백인 float속성과 margin, padding을 활용하여 정리한다. 1. 첫번째 레이아웃에서는 3행으로 만들어 정리 See the Pen poJpaoe by LimsUIUX (@LimsUIUX) on CodePen. 2. 두번째 레이아웃에서는 2행만 2단으로 정리 See the Pen YzXYezg by LimsUIUX (@LimsUIUX) on CodePen. 3. 세번째 레이아웃에서는 2행만 3단으로 정리 See the Pen QWbaQwK by LimsUIUX (@LimsUIUX.. 더보기
float 속성 2 - 박스정리 ※ float의 특징 1. float 속성은 레이아웃을 위하여 많이 사용하는 속성 중 하나이며, 2. 좌우의 위치를 정해주는 속성이다. 3. float속성을 지정하게 되면 블록요소이더라도, width 속성을 부여해 주어야 크로스브라우징이 된다. float의 속성을 활용하겠습니다. float은 위치속성은 아니지만 위치를 잡아줄 때 많이 쓰는(던?) 속성입니다. 속성 속성명 설명 float left float된 박스중 좌측이 짧을 때 좌측의 빈 공간부터 채워 내려옴 right float된 박스중 우측이 짧을 때 좌측의 빈 공간부터 채워 내려옴 none left나 right 적용한 float속성을 없앰 ※ float 속성을 해제 하는 방법 속성 : 속성값 설명 clear : both; float속성이 적용되어.. 더보기
float속성 1 박스는 크기와 위치를 가지고 있다. 1. 크기 : width, height, padding, border, margin 2. 위치 : float, position 여기서는 위치를 정리할 때 많이 쓰던(현재도 포함) float을 이해하도록 한다. 속성명 속성값 설명 float none 기본값 left 요소가 좌측으로 온다. right 요소가 우측으로 온다. div나, li, h태그처럼 display : block 의 속성을 가지고 있는 태그에 float : left 혹은 right를 주게 되면, div나, li, h태그처럼 display : block 의 속성을 가지고 있는 태그들도 width, height의 크기만큼만 자기 크기로 갖게 된다. display : block 의 속성의 성격인 [행 전체]를 .. 더보기
블록요소 속성 - 공간의 크기와 box-sizing 일반적으로 우리가 알고 있는 박스모델의 공간을 차지하는 속성은 : width, height, padding, border, margin 이 있다. widht, height는 박스의 폭과 높이를 말하고, padding은 안쪽 여백, border는 박스의 테두리, margin은 박스의 바깥 여백을 말한다. 박스의 크기가 width, hegiht만큼만 공간을 차지하게 된다 margin의 경우 상하 겹침이 있을 경우, 한번만 적용된다. padding이 적용된 경우, 텍스트를 작성하면, 하단에는 텍스트가 나타난다. box-sizing:border-box를 적용하면 공간의 크기에서 padding, border의 크기가 반영되지 않는다. 위의 그림을 보면 알수 있듯이, 기본 width, height 공간을 차지하는 .. 더보기
border속성 2 - 활용 border, animate, transform 속성을 활용 See the Pen border_smile man by LimsUIUX (@LimsUIUX) on CodePen. 더보기
border 속성 1 - 이해 1. border 속성은 박스모델에 테두리를 부여하는 속성이다. 속성 속성값 설명 border 1px solid #eee short hand border-width 1px 보더의 두께 border-style solid | dotted | dashed | none | groove | ridge | inset | outset 보더의 모양 border-color css의 색상표현기법 모두 가능 보더 색상 border-top 1px solid red 상단 보더 속성 border-right 1px solid red 우측 보더 속성 border-bottom 1px solid red 하단 보더 속성 border-left 1px solid red 좌측 보더 속성 border-radius 10px 10px 10px 10.. 더보기
background 속성 7 - image sprite 배경에 이미지를 넣을 때, 하나의 이미지 안에 여러개의 이미지를 만들어 넣어 background-position으로 배경이미지를 보이도록 해주는 기법으로, 브라우저에 웹페이지를 로딩할 때 속도를 줄여주기 위해 많이 사용하는 방법이다. 이미지의 좌측 상단이 기준점(0,0) 이므로, 기준점으로 위치를 이동시켜주는 식으로 사용한다. 예를 들어 상단으로 가져오게 되면, 이미지의 위쪽 방향으로 이동시켜야 하므로, 음수(-)방향으로 좌표의 거리만큼 이동시키고 이미지의 좌측 방향으로 이동시켜야 하므로, 음수(-)방향으로 좌표의 거리만큼 이동시킨다. 네이버의 경우 로고를 배경이미지로 사용하려면, 많은 이미지가 있는 .png파일에서 로고의 위치를 찾아 이미지의 (0,0) 좌표까지의 거리를 재서, 음수방향으로 보내서 로고.. 더보기
background 속성 6 - origin background-origin 속성은 배경에 이미지가 시작하는 부분을 지정할 수 있다. background-clip과 속성값은 같지만, 배경 색상에 적용하는 하는 것이 아니라, 배경이미지의 범위를 지정하는 것이라는 점에서 차이가 있다. 속성명 속성값 설명 background-origin padding-box 기본값, 테두리 안쪽부터 배경이미지 포함 border-box 테두리에 이미지 포함 content-box 안쪽여백(padding)안에서부터 배경이미지 포함 initial 기본값을 따름 See the Pen LYVQGRL by LimsUIUX (@LimsUIUX) on CodePen. [!!림스유의사항] 여기서도 본인의 컴에 img 폴더를 넣고 이미지를 jpg, gif, png 중 하나로 저장하여 배경.. 더보기

티스토리툴바