분류 전체보기430 디스플레이(display) 인라인(Inline) 글을 쓰는 방향으로 줄이 바뀌면서 배치된다. 블록과 달리 크기를 지정할 수 없다. 블록(Block) 위에서 아래로 차례대로 배치된다. 크기를 지정할 수 있다. 인라인블록(Inline-block) 인라인처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용하는 속성 float 요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고, 그 주변으로 인라인 요소들을 배치할 수 있다. 2023. 7. 14. 박스모델(box-modal) HTML/CSS에서 요소는 기본적으로 박스 형태이다. 밖에서부터 차례대로 바깥 여백(마진, margin), 테두리(보더, border), 테두리와 실제 내용 사이의 여백(패딩, padding), 그리고 실제 내용이 들어가는 콘텐트 박스(content box)가 있다. ■ 속성 padding / margin : 세로는 겹친다. 원하는 대로 안 나올 경우 '상쇄'를 의심해보자. 마진 상쇄 (Margin Collapsing) : 일반적으로 세로 마진은 서로 겹쳐서 화면에 나타난다. 서로 이웃한 태그에서는 세로로 마진을 겹쳐서 작용하고, 부모 자식인 관계인 태그에서도 세로로 마진을 겹쳐서 적용한다. 이때 부모에 padding이나 border가 있으면 경계가 있다고 생각하고 세로 마진을 겹치지 않는다. borde.. 2023. 7. 14. 자주 쓰이는 CSS 속성 ■ 그라디언트 ■ 배경이미지 background-image ■ 그림자 2023. 7. 14. CSS 기본 개념 ■ CSS 규칙 선택자(아이디 or 클래스) + 선언(속성 + 값 + 세미콜론) ■ CSS 파일 저장법 ■ 색상 RGB / RGBA 차이점 : 불투명도 Alpha ■ 크기 단위 절대 단위 px : 화면을 표시하는 기준이 되는 가장 작은 정사각형. ex) 10px = 10개 상대 단위 % - 부모 태그에 대해서 상대적인 크기 - 부모의 크기만 바꿔주면 되는 장점이 있다. em - 인쇄에서 전통적으로 대문자 M의 크기 - 1em : 부모 태그의 font-size rem - 글자 크기를 기준으로 상대적인 크기를 정한다. - 1rem : 최상위 태그(html)의 font-size ■ 텍스트와 관련된 CSS 속성 Color font0size font-family font-weight : 100단위 line-hei.. 2023. 7. 14. 2. 마크업 & 태그 & link ■ 시맨틱 태그 의미를 가진 태그, 이름이 붙여진 div 태그 무조건 사용하는 것이 아니라, 작성하는 사람의 의도가 중요하다. 왜 사용하는가? 검색엔진 최적화 웹 접근성 개발자의 생산성 ■ link rel stylesheet : css 파일 icon : 사이트 아이콘 href mailto - 라는 걸 사용하면 이메일을 보낼 수 있다. 이 링크를 클릭하면 이메일 프로그램이나 이메일 앱을 열 수 있고, 받는 사람 주소에 링크에 적힌 이메일 주소를 자동으로 입력해 준다. ex) 메일 보내기 tel - 를 사용하면 전화를 걸 수 있다. 데스크톱 컴퓨터에서는 전화 기능이 없을 수 있지만, 스마트폰에서 이 링크를 클릭하면 전화 앱으로 연결된다. ex) 전화 걸기 ■ a target : _blank / _self(기.. 2023. 7. 14. 이전 1 ··· 63 64 65 66 67 68 69 ··· 86 다음