본문 바로가기

html, 스타일시트(css, scss)41

[html/css] Box-sizing 속성 box-sizing 속성 box-sizing 속성은 컨텐츠 영역에 border와 padding 을 포함시켜주는 속성이다.보통 css box model을 계산할 때 width + (padding*2) + (border*2) + (margin*2) 라는 공식으로 계산하지만,box-sizing 속성을 이용하면 padding과 border를 컨텐츠영역(width/height)안에 포함시켜주어 계산하기 쉬워진다.box-sizing : content-box; ★★★box-sizing : border-box;  속성을 활용하기 전, div에 속성을 부여하여 기본 틀을 만들어 주겠다.   box1과 box2에 각각 다른 속성을 부여하여 차이를 확인해보자. 1. content-box 일 때, 부여하지 않았을 때와 마찬가.. 2024. 6. 3.
border 보더의 두께는 절대 상대단위 쓰지 않는다, 절대단위 씀.border none 초기화할때 쓴다. 이미지 태그에서도 쓰는데 옛날 익스플로러에서는 이미지에 보더가있었다.보더는 패딩이나 마진처럼 위아래 양옆 같이 적용하는 것이 없다. 적용하고 싶으면 상하좌주 다 따로 써줘야한다.  https://han288.tistory.com/40 Emmet CSS3 float left, div 태그 여러개 한번에 코딩하는 유용한 단축키, 스타일시트 적용 방법아톰에서 HTML5, CSS3 작성 중 레이아웃을 잡기 위해 float을 자주 사용하게 됩니다. float:left 자동 완성 단축키 ffl 3단어를 넣고 탭 키를 누르게 되면 float:left가 자동 완성이 됩니다. div 태그 여러개han288.tistory.com.. 2024. 5. 31.
[html/css] div 속성 공간을 나누는 div 태그div 태그는 웹페이지에서 레이아웃을 만들 때, 주로 사용하는 태그이다. block 속성의 대표적인 태그로 너비, 높이를 지정하지 않으면 브라우저의 전체 너비를 차지한다.block 속성의 너비 높이와 여백을 주고 싶을때에는 CSS BOX MODEL이라는 개념을 알아야 한다.CSS BOX MODEL: block 속성을 가진 모든 태그들은 박스의 형태를 가지고 있다.css를 통해 가로, 세로의 크기를 정하여 형태를 만들고 여백 및 배치 형태를 설정해 원하는 위치에 배치한다.이러한 박스 형태를 가진 요소를 스타일 시트(css)에서는 'CSS BOX MODEL'이라고 부른다. div 파일을 만들어 직접 보면서 속성을 파악해 보도록 하겠다.내용 현재 div 태그는 투명한 빈 박스 상태이다.. 2024. 5. 31.
[html/css] web font(웹 폰트) 연결하기 브라우저 스타일 초기화 웹 사이트를 만들때, 꼭 들어가야하는 폴더가 있다.css, js, img 세개와 pages 혹은 sub이란 명칭의 서브 폴더이다. 오늘은 css 에서 웹폰트를 적용해보려고 한다.웹폰트를 적용하기 전, 브라우저에 내장되어있는 스타일을 먼저 초기화 시키고 시작하자.보통 초기화를 할때 css에 초기화 파일 따로 만들어서 적용한다.html 기본 css 초기화 소스가 따로 있지만, 초기화 내용을 파악하기 위해서 몇가지만 진행하며 알아보자.1. 전체선택자에서 여백 없애기.*{margion: 0; padding: 0;} 2. 글자꾸밈 초기화선택자{text-decoration: none;}3. 목록스타일(불릿,들여쓰기) 초기화선택자{list-style: none;}4. 태그 속성 바꾸기선택자{d.. 2024. 5. 30.
[html/css] 글자 스타일 적용하기 글자 색상 (color) 원하는 선택자에 색상을 적용하는 방법이다.선택자{ color: 색상(RGB, HSL, 등);} 색상 옆의 네모 박스에 마우스를 갖다대면 아래와 같은 컬러 박스가 나온다.이곳에서 색상을 선택하는 것도 가능하고,그 위의 글자(ex.rgb(255,177,74))를 클릭하면 다른 단위의 색상 코드를 보여준다. alpha는 투명도를 뜻한다. 색상코드의 맨 뒤에 숫자를 추가하여 사용 가능하다.    0 ~ 1 사이의 값을 이용해 투명도를 표시할 수 있다.    0 : 투명도 100%    0.5 : 투명도 50%    1 : 투명도 0%글꼴 (font-family)폰트패밀리에서는 폰트 이름은 쌍따옴표(") 사이에 들어가 있어야 한다.폰트 이름이 그대로 적혀 있어야 오류가 나지 않는다. (띄.. 2024. 5. 30.
html 기본 css 초기화 소스 /* reset.css */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figca.. 2024. 5. 30.

티스토리툴바