프로그래밍/HTML, CSS18 FlexItem Properties - Flexible Box Layout(Flexbox) 예전글 "Flexible Box Layout(Flexbox) - Flex Container Properties" 에서 플렉스 컨테이너의 프로퍼티들에 대해서 알아보았습니다. 이번에는 플렉스 컨테이너 내부의 플렉스 아이템이 가지는 플로퍼티들에 대해서 알아봅니다. FlexItem의 프로퍼티는 다음의 여섯가지가 있습니다. 1. order정수를(-,0,+) 값으로 가지며, FlexItem의 순서를 지정할 수 있습니다. FlexItem이 컨테이너에 배치되는 기본 순서는 HTML태그를 추가한 순서가 됩니다. FlexItem의 order 프로퍼티를 사용하면 임의로 순서를 바꿀 수 있습니다. 주의해야 할것은 order는 보이는 순서에만 영향을 주지 탭순서등에는 영향이 없습니다. 2. flex-grow0이상의 실수를 사용.. 2018. 12. 3. Flexible Box Layout(Flexbox) - Flex Container Properties Flexible Box Layout(Flexbox)은 스타일이 "display: flex;" 로 지정된 컨테이너 요소내에 자식 요소들을 배치하는 방법에 관한 CSS 입니다. 웹 페이지 레이아웃을 만드는데 있어서 기존에는 float를 많이 사용했는데, 사용하기 힘든 점들이 있었습니다. Flexbox는 좀 더 강력한 레이아웃을 만드는 방법입니다. 하지만 많은 설정 요소들로 인해 사용이 쉽지는 않습니다. ul { display: flex; flex-direction: row; padding: 0; list-style-type: none; outline: solid 1px red; } li { width: 100px; height: 100px; background-color: lightgreen; margin:.. 2018. 10. 29. HTML5 VIDEO 태그로 웹페이지에 동영상 넣기 HTML5에서 새로 나온 기능인 태그를 사용해서 웹 페이지에 동영상을 넣을 수 있습니다. 1. 호환성브라우저 호환성은 IE9 부터 태그를 지원합니다. 지원하는 동영상 포맷을 IE9 부터 .webm, .mp4 를 지원합니다. 2. 주요 속성- width : 동영상 너비- height : 동영상 높이- controls : 설정되면 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.- autoplay : 설정되면 페이지 로딩시 자동 실행됩니다.- oncontextmenu : false 를 반환하면 마우스 오른쪽 키로 띄우는 팝업 메뉴를 사용할 수 없게 됩니다.- src : 동영상을 지정합니다. 내부의 속성을 사용하여 여러개의 동.. 2018. 10. 10. CSS box-sizing 프로퍼티 사용법 HTML 요소들의 크기는 Box Model을 따릅니다. 모든 요소들은 사각형 박스 형태로 페이지내에서 자리를 차지하게 됩니다. 이때 상자(Box)는 컨텐츠 영역, 패딩, 보더, 마진의 영역으로 이루어지고 CSS 에서 width 는 컨텐츠 영역 만을 말합니다. 그러므로 실제로 요소가 차지하는 width는 컨텐츠 너비 + (패딩 x 2) + (보더 x 2) + (마진 x 2) 가 됩니다.(x2 는 좌, 우를 모두 포함하기 때문입니다.) Box Model에 대한 자세한 설명은 "CSS Box Model, Element Size, iframe Auto Resize"을 참고 하세요. CSS에서 요소의 너비(width)가 결정되는 방식을 변경할 수 있는 프로퍼티가 box-sizing 입니다. box-sizing 에.. 2018. 9. 30. CSS에서 height: 100% 가 동작 하도록 설정하기 태그의 높이를 100%로 줘서 차지할 수 있는 전체 높이를 가지도록 하려고 합니다. 아래와 같이 스타일에 hieght: 100% 를 지정했지만 동작하지 않습니다. .panel-container { height: 100%; display: flex; flex-direction: row; border: 1px solid silver; overflow: hidden;} 너비나, 높이를 비율(%)로 주게 되면 그 엘리먼트를 포함하고 있는 부모 엘리먼트에 대해 상대적으로 길이가 정해 집니다. 부모 태그가 body 인데, body 는 기본적으로 높이값이 나오지 않습니다. 그러므로 해결 방법은 부모 태그에 높이를 주면 됩니다. html, body { margin: 0; height: 100%; overflow: hi.. 2018. 9. 27. textarea로 입력 받은 글을 공백과 줄바꿈을 살려 출력하기 HTML에디터가 아닌 일반 textarea 로 입력 받은 글을 페이지에 출력해야 할 경우가 많이 있습니다. 출력시에는 보통 JSP 라면 형태로 출력합니다. 이 경우 html 태그들은 escape 되어서 태그가 화면에 그대로 보여지게 됩니다. 이것은 XSS(Cross Site Scripting)를 방지 하기 위한 방법이기도 합니다. 하지만, 그냥 출력하게 되면 컨텐츠의 모든 라인이 하나의 행으로 붙어서 출력이 되어서 보기 힘들게 됩니다. textarea로 입력한 문자열을 개행하여 보여주는 방법을 알아보겠습니다. 1. 출력에도 textarea를 사용하기 출력할 때도 textarea에 출력하는게 가장 간편한 방법입니다. 2. 서비스 단에서 또는 프레젠테이션 단에서 개행문자(\n)을 로 치환하는 방법 이 경우 .. 2018. 8. 7. 프로토콜에 상대적인 URL 지정하기 8월말부터 티스토리에 SSL이 적용된다고 하네요. 블로그 주소가 https://offbyone.tistory.com 으로 바뀔 경우 대비해야할 내용으로 외부리소스(javascript, image, css)의 주소가 http://로 시작하는 주소로 하드코딩되어 있는경우 변경이 필요하다는 내용이 공지 되어 있었습니다. 만약 외부 리소스가 http:// 로 시작하는 URL로 되어 있다면 어떻게 될까요? IE 라면 다음과 같은 오류가 뜨게 됩니다. "보안컨텐츠만 표시합니다." 라는 메세지를 내고 http://로 시작하는 자원은 표시를 하지 않게 됩니다. "모든 컨텐츠 표시"를 클릭하면 그때 모든 자원을 표시하게 됩니다. 외부자원을 사용하는 것이 있을때 먼저 확인해야 할것은 이 외부자원이 https 를 지원하는지.. 2018. 8. 1. CSS - float 와 clear 프로퍼티 사용하기 HTML 요소가 화면에 보여지는 기본 방식은 Block 요소인 경우 자동으로 개행되어 아래에 보여지게 되고, Inline 요소인 경우는 오른쪽 옆에 배치되어지고, 화면에 다 보여지지 않으면 아래로 내려가서 배치되어지는 것입니다. CSS의 float 프로퍼티는 HTML 요소가 일반적인 흐름에 따르는 배치를 벗어나서 왼쪽 또는 오른쪽으로 띄우는(float) 효과를 줍니다. clear 프로퍼티는 clear된 요소의 좌우에 float된 요소를 허용하지 않도록 합니다. ※ float 프로퍼티의 값- left : 요소 자신을 포함하고 있는 컨테이너의 왼쪽으로 띄웁니다.- right : 요소 자신을 포함하고 있는 컨테이너의 오른쪽으로 띄웁니다.- none : 요소를 띄우지 않습니다. 기본값 입니다. ※ clear 프.. 2018. 5. 9. CSS - overflow 속성 사용하기 CSS의 overflow 프로퍼티는 요소내의 컨텐츠가 너무 커서 요소내에 모두 보여주기 힘들때 그것을 어떻게 보여줄지를 지정합니다. 기본적으로 컨텐츠를 포함하고 있는 요소의 크기가 고정되어 있지 않다면 컨텐츠를 모두 포함할 수 있도록 요소의 크기가 커집니다. 크기가 고정 되어 있다면 overflow 프로퍼티에 지정된 값에 따라 보여지게 됩니다. overflow 에 사용할 수 있는 값은 네가지가 있습니다. - visible : 기본 값입니다. 넘칠 경우 컨텐츠가 상자 밖으로 보여집니다. - hidden : 넘치는 부분은 잘려서 보여지지 않습니다. - scroll : 스크롤바가 추가되어 스크롤할 수 있습니다.(가로, 세로 모두 추가 됩니다.) - auto : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결.. 2018. 5. 9. CSS - position 프로퍼티 사용하기 CSS의 position 프로퍼티는 top, right, bottom, left 프로퍼티로 HTML 요소의 위치를 지정할때 무엇을 기준으로, 어떤 식으로 사용되어질지 그 방법을 지정합니다. postion 프로퍼티에 사용되어지는 다섯가지 값입니다.- static- relative- fixed- absolute- sticky 1. postion: static; position 프로퍼티를 지정하지 않았을 때의 기본값이 static 입니다. 이 상태에서는 top, bottom, left, right 프로퍼티가 동작을 하지 않습니다. HTML요소의 배치는 일반적인 흐름을 따름니다. 내용 2. position: relative; HTML 요소의 postion 프로퍼티를 relative로 설정하면 일반적인 위치(po.. 2018. 5. 9. CSS - display 와 visibility 프로퍼티 사용하기 화면에서 HTML 요소를 숨기거나, 다시 보여주기 위해서 display 또는 visibility 프로퍼티를 사용합니다. 이러한 작업을 하기 위해서 display 프로퍼티는 none과 block 또는 inline 값을 사용하고, visibility 프로퍼티에서는 hidden과 visible 값을 사용합니다. 화면에서 HTML 요소를 숨기는 작업을 함에 있어 이 두 가지 프로퍼티에는 큰 차이가 존재합니다. visibility:hidden 을 사용하면 그 요소가 차지하던 공간은 그대로 유지되고, 화면에 보이지만 않게 됩니다. display:none 을 사용하면 그 요소가 아예 없었던것 처럼 처리됩니다. 레이아웃에 변화가 오게 되는 것입니다. 두 가지의 프로퍼티의 특성을 잘 고려해서 사용해야 하겠습니다. dis.. 2018. 4. 20. CSS Box Model, Element Size, iframe Auto Resize 이번에 알아볼 것은 HTML 페이지를 디자인하고 레이아웃을 만들 때 엘리먼트가 화면에서 어떻게 공간을 차지하는지와 엘리먼트의 크기에 대해 알아봅니다. 그리고 추가적으로 자바스크립트에서 엘리먼트의 사이즈를 알아보는 방법과 iFrame을 사용하는 페이지가 로딩될때 iFrame이 포함하고 있는 컨텐츠에 따라 자동으로 크기를 조정하는 방법을 알아보겠습니다. 1. CSS Box Model 화면에 보여지는 모든 HTML 엘리먼트들은 사각형 박스 모양으로 공간을 차지합니다. 이것은 CSS에서는 Box Model(박스 모델)이라고 합니다. HTML 요소는 실제 컨텐츠를 패딩(Padding), 보더(Border), 마진(Margin)의 세가지 박스가 둘러싸고 있는 모양 입니다. 각각을 알아보면 다음과 같습니다. * Co.. 2018. 4. 17. IE 6~8 에서 CSS Pseudo class 및 Attribute Selector 지원하기 CSS3에서 지원되는 의사 Pseudo class 및 Attribute Selector들은 CSS의 효용성을 더욱 높여 줍니다. 동적으로 갯수가 변하는 의 행이나 열, 의 아이템 등의 첫 번째와 마지막에만 스타일을 달리하는 경우는 많이 사용되는 예가 되겠습니다. 이런 상황에서 :first-child, :last-child 등이 지원 되지 않으면 프로그램에서 루프를 돌면서 출력을 하다가 처음과 끝은 판단해서 다른 스타일을 붙여주는 형식으로 처리하게 됩니다. 이러면 루프내의 조건문으로 인해 코드가 보기 깔끔하지 못하게 됩니다. 다행히도 CSS3 에서는 이러한 특정위치의 요소를 선택할 수 있는방법이 제공됩니다. 하지만 오래된 브라우저를 지원해야 한다면 polyfill을 적용해야 할 것입니다. selectivi.. 2018. 4. 9. 반응형 웹에서의 자바스크립트를 반응형으로 사용하기 반응형 웹을 만들기 위해서 CSS3 미디어 쿼리를 이용하여 화면 크기에 따라 적용하는 스타일을 달리하는 방법은 "반응형 웹을 위한 미디어 쿼리 사용법(CSS media queries)" 에서 알아 보았었습니다. 화면 크기에 따라 스타일 시트를 변경하여 페이지내의 요소들의 사이즈를 늘리고 줄이거나, 위치를 변경하고, 보이거나 감추거나 하는 작업을 할 수 있습니다. 원하는 디자인이 이러한 것들 뿐만 아니라 제목의 길이를 줄이거나, 이미지를 교체하거나, 특정 요소를 클릭했을 때의 동작을 변경하거나 하는것이 필요하다면 CSS만으로는 구현하기가 힘듭니다. PC에서 보여줄 것과 휴대기기에서 보여줄것을 따로 만들고, 각각에 필요한 이벤트를 자바스크립트로 구현한 후 화면 크기에 따라 숨기거나 보여주는 CSS를 이용해서.. 2018. 4. 9. 반응형 웹을 위한 미디어 쿼리 사용법(CSS media queries) 미디어 쿼리는 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)과 적어도 하나 이상의 표현식(expression)으로 구성됩니다. 표현식은 width, height, color와 같은 미디어 특성(media feature)들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있습니다. 미디어 쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있습니다. 미디어 쿼리는 두 가지 방법으로 사용할 수 있습니다. 첫 번째는 요소에 사용하여 특성이 조건에 맞을때 css 파일을 불러옵니다. media속성의 "screen and (max-width: 768px)"의 의미는 미디어 .. 2018. 4. 9. 이전 1 2 다음
