Atelier BiCute

#1 스타일 시트 종류 설명 브라우저 기본 스타일 웹 브라우저에 웹 문서를 표시할 때 브라우저에서 기본으로 사용하는 스타일 인라인 스타일 style 속성을 사용해 필요한 요소에 스타일을 직접 지정 내부 스타일 시트 문서 앞부분에 문서에서 사용하는 스타일을 모아서 함께 정의하고 관리 외부 스타일 시트 문서에서 사용하는 스타일을 모아서 따로 파일로 저장한 후 연결해서 사용 #2 CSS 기본 선택자 종류 설명 작성 예시 전체 선택자 문서의 모든 요소에 스타일을 적용 * { margin: 0; } 타입 선택자 특정 태그를 사용한 모든 요소에 스타일 적용 p { font-style: italic; } 클래스 선택자 특정 부분만 선택해서 문서 안에 여러 번 적용 마침표(.)를 붙여 사용 .bg { backgroun..

#1 텍스트 관련 태그 종류 설명 제목. ~까지 사용할 수 있으며 숫자가 커질수록 글자 크기는 작아짐 텍스트 단락. 내용이 길면 웹브라우저 창의 너비에 맞게 자동으로 줄 바꿈 줄 바꿈. 텍스트 단락 중 원하는 위치에서 줄 바꿈 내용 인용. 다른 내용보다 들여 쓰고 단락으로 표시 중요한 텍스트를 굵게 표시. 화면 낭독기에서 강조해서 읽어 줌 중요하지는 않지만 굵게 표시 중요한 텍스트를 기울게 표시(문장), 화면 낭독기에서 강조해서 읽어 줌 중요하지는 않지만 기울게 표시(마음속의 생각이나 용어) 내용을 편집할 때 추가한 내용을 표사 내용을 편집할 때 삭제한 내용을 표시 위 첨자 아래 첨자 #2 목록 관련 태그 종류 설명 순서 있는 목록의 시작과 끝 순서 없는 목록의 시작과 끝 순서 있는 목록이나 순서 없는 ..

마진 겹침(amrgin collapsing) CSS로 스타일을 주다 보면 주로 섹션별로 구분이 되는 부분처럼 위아래 항목에 margin이 공통으로 들어가는 경우가 종종 발생합니다. 예를들어 위쪽 블록에서 마진 40px을 주고 아래쪽에서 마진 40px을 주면 예상대로라면 중간에 80px의 공간이 생겨야 하는데 서로 겹치는 40px의 공간만 남게 됩니다. 또 다른 예로 위쪽 블럭에서 마진 80px을 주고 아래쪽에서 마진을 40px을 주게 되어도 합쳐지며 80px의 공간만이 생겨납니다. 이런 증상을 해결하는 방법입니다. 아래는간략한 샘플입니다. 1) 박스 생성 2개의 박스를 만들어 보았습니다. 구분하기 쉬워보이게 배경색도 넣어봅니다. 이렇게 만들면 당연하게도 2개는 연속되게 나타납니다. 2) 패딩(paddin..

"폰트는 한글은 Noto Sans KR로, 영어는 Roboto로, 숫자는 Spoqa Han Sans Neo로 부탁드려요." 이런 요청을 받으면, 매번 해당 언어마다 폰트를 지정해 줄 수도 없는 노릇인데, 이럴 때 @font-face를 사용하면 쉽게 해결할 수 있습니다. #1 웹 폰트 웹 폰트는 사용자가 현재 사용하는 기기에 서체를 설치하지 않았더라도 @font-face 명령을 통해서 웹 브라우저에서 폰트를 다운로드하여 사용자에게 보여줍니다. 웹 폰트를 사용하기 위해서는 @font-face로 해당 폰트를 다운로드할 위치를 지정해주고, font-family 속성을 사용하여 적용 할 수 있습니다. 사용 예) @font-face { font-family: 'Gugi-Regular'; font-style: nor..

부모 요소에 사용하는 속성들 grid GridBox란것을 정의 (이것만으로는 특별한 반응은 없음) display: grid; grid-template-columns 몇 열(columns)로 할 것인지, 박스들의 사이즈는 어떻게 할 것인지 지정. grid-template-columns: 4fr 6fr; /* 4대 6으로 나눔 */ grid-template-columns: 40% 60%; /* %로도 사용은 가능 */ grid-template-columns: repeat(3, 1fr); /* 사이즈가 반복될 경우 repeat 방식으로도 가능 */ grid-template-columns: 1fr 1fr 1fr; /*위 repeat과 같다 */ grid-template-rows 몇 줄(rows)로 할 것인지, ..

부모요소에 사용하는 속성들 flex flex는 부모 요소에 사용하면 자식 요소들을 정렬 시켜주는 속성 display: flex; flex-direction 정렬의 방향을 지정하는 flex-direction flex-direction:row; /* (기본값) 자손을 가로로 배치 */ flex-direction:column; /* 자손을 세로로 배치 */ flex-direction:row-reverse; /* 자손을 가로방향으로 순서를 뒤집어 배치 */ flex-direction:column-reverse; /* 자손을 세로방향으로 순서를 뒤집어 배치 */ flex-wrap 줄바꿈 여부를 지정하는 flex-wrap flex-wrap : nowrap; /* (기본값) 줄바꿈 하지않음 */ flex-wrap :..