HTML(31)
-
레이아웃 스타일(float, clear)
정렬을 도와주는 float, clear float : 태그를 띄워서 좌/우로 정렬하는 속성 float을 지정하지 않은 태그와 지정된 태그가 겹치는 문제 발생 clear : float으로 인해 띄워져 있는 상태를 해제하는 속성 태그 겹침 문제를 해결 ** 오른쪽 정렬 오른쪽부터 1, 2, 3 정렬된다.
2024.05.17 -
레이아웃 스타일(여백 관련 스타일)
1. padding : 내용과 선 사이의 공간. 태그 영역이 넓어짐 2. border : 테두리. 영역이 어디까지인지 구분하기 위한 선 3. margin 여백 간격. 다른 태그와의 간격을 나타내는 영역 border 영역 : ex) border: 1px solid black 선의 표현 : 어느 선을 표현할 것인가를 작성 none : 테두리 표시 없애기 dotted : 테두리를 둥근 점으로 여러개 그려짐. 간격지정 x dashed : 테두리를 직사각형으로 여러개 그려짐. 간격,크기지정 x solid : 직선 테두리로 그려짐 double : 테두리를 이중선으로 그려짐 groove : 테두리가 파인 것 처럼 그려짐(입체감) ridge : 테두리가 튀어나온 것처럼..
2024.05.17 -
레이아웃 스타일(display , visibility)
레이아웃(layout)이란 : 사용 목적을 기반으로 시각적 효과를 구성하는 행위 display : 화면 표시나 형식에 대한 배치 지정- 태그가 화면에 어떻게 보여질지 형식을 지정하는 속성 - block : 화면을 수직 분할(한 줄 차지) 가로(width), 세로(height) 지정 가능 - inline : 화면을 수평 분할(디자인을 글자, 문자열로 취급) 가로(width), 세로(height) 지정 불가능 - inline-block : inline처럼 수평 분할은 가능하되 block처럼 가로 세로 지정이 가능 가로(width), 세로(height) 지정 가능 - none : 태그가 존재하지만 숨김. 화면에 보이지 않게 함 - flex : 태그 간의 간격을 유연하게 처리하는..
2024.05.17 -
일반 위치 선택자
일반적인 위치나 구조를 나타내는 선택자 형제 관계에 있는 태그들 중에서 특정 태그만 선택하는 선택자 선택하는 기준을 통해 위치를 구분 div 태그 대신 변수명 A로 선택할 수 있음 - A: first-child 형제들 중에서 가장 첫 번째를 선택 첫 번째가 "A"가 맞다면 선택 - B: last-child 형제들 중에서 가장 마지막 번째를 선택 마지막이 "B"가 맞다면 선택 일: nth-child(1) = 형제들 중에서 첫 번째가 "일"이 맞다면 선택 이: nth-child(2) = 형제들 중에서 두 번째가 "이"가 맞다면 선택 삼: nth-child(3) = 형제들 중에서 두 번째가 "삼"가 맞다면..
2024.05.17 -
서식 양식
box-shadow: x좌표 y좌표(역순. 위로갈수록 음수) 그림자크기 색깔지정; border : 모서리 상하좌우 모두 서식- border-bottom : 아래 테두리- border-top : 위 테두리- border-radius: n; 모서리 곡선으로 서식 display: inline; 가로로 정렬 text-decoration: none; a태그랑 사용 시 링크 밑줄 제거color: 글자색 변경 font-size: 글자 크기 조절 : 설정된 값으로 폰트 크기 변경. px를 많이 사용font-weight: 글자 굵기 조절 최대 900 background-color: 배경색 margin: 0 auto; 형식 가운데 자동 정렬 설정 text-align: center; ..
2024.05.17 -
CSS선택자
CSS란. - 마크업 언어(html)가 실제로 화면에 표시되는 방법을 기술하는 언어 (모양, 색상, 크기, 배경이미지, 움직임 등) - 하나의 태그에 여러 css코드를 겹쳐서 원하는 스타일을 만들어냄 - W3C에서 CSS를 표준 스타일 서식방식으로 지정 - style 태그는 head안에 작성해도 되고 body안에 작성해도 됨 - head와 body 안이 아니라 다른 곳에 존재해도 됨 - 다만 head 안에 모아서 작성해주는 것이 암묵적인 룰이며 추후 수정하거나 추가 작업을 진행할 때 유용 CSS선택자 CSS로 꾸미기 설정을 진행할 때는 5가지 방법이 존재 1. 태그옆에 style="원하는 스타일 작성" 안녕하세요. 2. head 태그 안에 style 태그를 작성해서 스타일 ..
2024.05.17