float float : left; = 요소를 붕 띄워서 왼쪽에 정렬한다. float 를 사용하면 붕 띄워있기 때문에 div 등을 추가하면 겹쳐서 보이지 않는 문제가 발생한다 이를 해결하기 위해서는 float 를 가진 태그 뒤에 오는 태그에 clear : both 를 추가해 문제해결 .middle { float : left; } .bottom { claer : both; } inline-block display : block : 한 행을 전부 차지 div 박스, p 태그 등은 block 특성을 가지고 있음 display : inline-block : 내 크기만큼 차지 띄어쓰기만 있어도 공백이 생겨서 불편함 vertical-align : top; bottom ... 인라인블록 에서 글자를 쓸때 필요함.. ..
네모박스를 넣는 태그 div div 박스 디자인 스타일 margin : 박스와 브라우저 창 사이의 여백 padding : 박스 안쪽 여백 설정 border : 태두리 두께, 종류, 색 border-radius : 태두리 둥글게 중앙 정렬 margin-left : auto; margin-right : auto; div 태그는 display = block; 속성을 가지고 있음
글자 스타일링 글자 크기 font-size : 픽셀값; % 로 설정할 시 부모태그에 비례 글꼴, 폰트 font-family : ' 폰트이름 ' ; 폰트 색 color : 색; 자간 크기 letter-spacing : 픽셀; 글자 정렬 text-align : 위치; 글자 굵기 font-weight : 100~900
HTML 태그 내에서 CSS 스타일 적용하는 법 lorem 외부에 만든 css 파일 연동하는 법 Class selector 이름으로 설정 / 클래스 점 찍고 작성해야 함 ㅇㅇ ====css 파일================== .스타일이름 { css 속성; css 속성; } Tag Selector 태그 명으로 작성 모든 태그에 적용됨 태그명{ 스타일; } id Selector 태그의 아이디에 스타일 적용하는 법 # 붙이고 작성해야 함 보통 아이디는 자바스크립트에서 사용하므로 거의 사용하지 않는다. #아이디명 { 스타일 } 셀렉터의 우선순위 태그 내부의 style 아이디 셀렉터 # 클래스 셀렉터 . 태그 셀렉터
HTML이란? HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language)라는 의미의 웹 페이지를 위한 지배적인 마크업 언어 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성 태그란? HTML를 구성하기 위한 요소 꺽쇠 괄호에 둘러 쌓여 있음 : 태그의 분류 Block 태그 Block 태그는 새로운 라인에서 시작 되며, Block 태그 다음에 오는 모든 태그들은 새 라인에서 시작 >> 행렬로 비교하면 행에 해당 Block 태그들은 css의 속성 중 height, width, margin, padding을 적용할 수 있다. 예 : , Inline 태그 Inline 태그들은 새라인에서 시작하지 않고 현재 라인에서 시작 >> 행렬로 비교하면 열에..
