분류 전체보기410 박스모델(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. HTML과 기본구조 23.07.14 ver 1. HTML 웹 개발은 항상 HTML부터 시작한다. ■ HTML이란? 웹 문서를 만드는 언어 웹 사이트 표시를 위해 개발된 마크업 언어 웹컨텐츠의 구조와 의미를 정의한다. HyperText Markup Language 웹 브라우저에 보여 줄 내용에 마크업하고 문서끼리 링크하는 것 하이퍼텍스트(HyperText) : 서로 링크로 연결된 문서 마크업(Markup) : 표시한다(구조와 의미). 즉, HTML에는 서로 연결한다는 의미가 포함되어 있다. 다시 말해, 웹 브라우저에 내용을 보여 주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것을 의미한다. HyperText 하이퍼링크(참조)를 통해 한 문서에서 다른 문서로 즉시 접근 가능한 텍스트 Markup Language - 태그로 .. 2023. 7. 14. 이전 1 ··· 59 60 61 62 63 64 65 ··· 82 다음