본문 바로가기

HTML5&CSS3

Layout - float
2020. 10. 20. CSS : float 속성 HTML 레이아웃을 잡는데 사용하는 속성이다. 다음의 코드를 보자. 이미지에 대한 설명 이미지에 대한 설명 이미지에 대한 설명 이미지에 대한 설명 이미지에 대한 설명 이미지에 대한 설명 이미지에 대한 설명 이미지에 대한 설명 이미지에 대한 설명 이미지에 대한 설명 이미지에 대한 설명 이미지에 대한 설명 위 코드의 결과로 나온 화면을 보면 다음과 같다. div 태그에 이미지에 대한 설명인 텍스트를 담고, 그 밑에 img 태그로 이미지를 불러서 화면에 출력하였다. 여기서 이미지에 대한 설명글이 이미지의 오른쪽에 붙여서 출력을 하려고 할 때, 쓰는 방법이 float 속성이다. float : left 값을 beer 클래스 (img 태그)에 적용한 후의 모습 float 제어하기 아래와 ..
HTML : data-* 태그
2020. 9. 12. HTML data-* 태그 data-* 는 원하는 태그를 커스텀하는 것이다. 복잡한 화면을 정의할 때 class, id, name 으로 충분하지 않을 경우가 있는데, 이 때 사용하면 매우 유용하다. name 으로만 form 을 보내고, 받아온 정보를 뿌리기에 충분하지 않을 경우가 있는데, 이 때 data-name 이라고 정의하면, 서버에 보내는 태그 따로, 서버에서 받아온 정보를 뿌리는 태그인 'name' 을 따로따로 정의할 수 있다. data- 다음에 사용자의 기호에 따라서 정의해서 사용하면 된다.
CSS background-attachment : fixed;
2020. 9. 12. background-attachment: fixed; 백그라운드 이미지가 스크롤 되지 않는다. 브라우저를 스크롤 하면서 이미지는 움직이지 않지만, 이미지 보다 위에 있는 요소들이 움직이면서, 마스크 기능을 낼 수 있다. https://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-attachment_fixed Tryit Editor v3.6 .fixed-bg { background-image: url("img_tree.gif"); min-height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-..
CSS Global 변수 사용법
2020. 9. 12. CSS Global 변수 사용법 :root{ --color-red : #111111 --color-orange : #111111 --color-yellow : #111111 --color-green : #111111 --color-blue : #111111 } .class or id or tag etc... { color : var(--color-red); } 위와 같은 식으로 사용할 수 있다. 따라서 보통 색, 폰트, 크기 등의 자주 사용하는 값 또는 수치 등을 미리 정의하고, 필요한 곳에서 참조하도록 한다. >> '--' CSS 에서 정의한 custom 변수 설정 방법 또한 이것을 이용하여 calc 도 사용할 수 있다. ex) input { font-size : calc(var(--font-size-..
CSS 중앙정렬 몇 가지 기법
2020. 9. 12. CSS 중앙정렬 margin : auto block 레벨의 요소에 적용된다. 기본적으로 수평정렬은 가능하지만, 수직정렬까지는 되지 않는다. margin : auto margin : 0px auto; maring : auto 0px; text-align : center block 레벨이 아닌 요소, inline 요소라면 중앙 정렬이 가능하다. transform : translate (x, y, z); block 레벨에서도 사용이 가능하다. transform : translate (50%, 50%);
CSS 박스모델
2020. 9. 11. CSS 박스 모델 box-sizing context-box: 기본 값 (default) border-box box-sizing : context-box padding 값을 부여했을 때 박스 자체의 크기가 커지지만, 컨텐츠의 크기는 유지된다 box-sizing : border-box padding 값을 부여해도 박스 자체의 크기는 유지가 되며 컨텐츠의 넓이가 작아진다. 화면 레이아웃을 잡을 때 border-box 로 하는 것이 편하다. content-box 의 장점은 position:relatvie, absolute 로 하여, 컨첸츠의 위치를 더욱 유동적으로 위치시킬 수 있다는 장점이 있다고 한다. Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/box-si..
CSS3 : nth-child 사용법
2020. 9. 9. nth-child 사용법 --- 요소를 이용하면 정상작동 되지만, id 나 class 를 사용했을 때는 인식하지 못함 -- 시간 있을 때 정리
CSS3 - whitespace 속성
2020. 9. 9. CSS3 : white-space HTML & CSS 로 간단한 메뉴바를 만들 때 flex 로 레이아웃을 잡고 브라우저 크기를 줄였을 때, 메뉴의 아이템에 들어가는 텍스트가 줄바꿈 되는 현상이 일어나서 레이아웃이 무너져버리는 현상이 있었다. 기본적으로 li 의 white-space 값은 normal 이며 li 의 공간이 줄어들면 그 안의 텍스트 값이 자동으로 줄바꿈을 한다. 이 특성이 문제가 될 때에는 white-space : nowrap 위의 값을 부여해서 해결하면 된다. nowrap 값은 은 my work 를 가지고 있는 li 에만 부여했는데, my work 보다 더 긴 텍스트를 가지고 있는 introduction 은 영향을 받지않는 이유는 공백이 없기 때문이다. https://developer.mo..

티스토리툴바