본문 바로가기

HTML & CSS

 (36)
이미지- 이미지 가운데 배치하기, 이미지 포지션으로 조정해 해당 영역만 보이게 하기 *이미지는 인라인 요소이지만 예외로 넓이와 높이가 적용됨 *이미지 가운데배치 방법 1. 부모 블럭요소에 text-align:center 하기 -이미지 위의 부모요소인 div 블럭에 text-align:center하면 가운데로 이미지 배치됨. 이미지에는 안됨 (이미지에 width가 없고 그냥 가운데 대충놓을 경우 사용) 2. width주고 margin:auto로 좌우여백주기 -부모 블럭에 width 설정 → 이미지에 width:100%(똑같은 px도 상관없음)주기 → 부모 블럭에 margin:auto 1보다는 2방법이 편한듯 *많은 그림 있는 이미지 한개에서 포지션으로 해당 보이는 영역 조정(많이 쓰이는 방법) -3개 세로로 붙어있는 이미지 높이가 150px일때 (150/3=50이니까 하나당 px로 조정)..
css 박스 모델 *블록: 한 줄 차지하는 요소 *인라인: 줄을 차지 하지 않는 요소, 콘텐츠만큼만 영역 차지, 여러개 인라인이 한줄에 표시됨 *block 태그 ,, , , , , , , , , *inline 태그 , , , , , , , , , , *실제 콘텐츠 영역, 패딩padding, 박스의 테두리border, 여러 박스 모델 사이의 여백인 마진margin 등의 요소로 구성 *padding: 여백, 선의 안 *margin: 여백, 선의 밖 -margin:auto →마진을 좌, 우 똑같이 줌(여백있을시 적용), 상하는 적용x(body 높이가 디바이스 보이는 만큼 정해진게 아니고 콘텐츠 높이만큼에 따라 달라지기 때문에 안 정해졌음) *display: 화면 배치 방법 정하기 -none, contents, block, in..
CSS 용어 및 기본 정리 *우선순위 1. 위에서부터 아래로 훑고 내려오기 때문에 아래가 중요하다. 2. 경로가 있는 것이 경로가 없는 것보다 우선 순위가 높다. (ex:h1안에 span.. 다 써주기) 3. 인라인>내부스타일>외부스타일 (인라인이 최고 높음) 4. 아이디>클래스>태그 (아이디가 최고 높음) (ex: #1 >.2 >h1 //순서가바뀌어도 아이디가 높음) #font 스타일 *font-family: 글꼴 지정 -font-family:[,, ] →[,]은 옵션인데 대괄호안에 있는 항목은 사용할 수도 있고, 사용하지 않을 수도 있음 -ex) p{font-family:굴림;} -p{font-family:"맑은 고딕", 돋움, 굴림} →""두 단어 이상으로 된 글꼴 이름이면 따옴표로 묶어 표시. *font-size : 글자 ..
HTML 용어 및 기본 정리 ⭑HTML : (Hypertext Markup Language) 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어 ⭑HTML5 : 구조, 뼈대 ⭑CSS3 : 디자인, 표현 ⭑웹표준 : 웹 기술의 공식적인 표준, 어느 웹 브라우저나 동일하게 적용, HTML5 ⭑웹접근성 : 누구든지 원활하게 웹 페이지를 이용하는 것 ex)시각장애인을 위한 음성지원 등 ⭑서버(server): 클라이언트 요청을 받으면 데이터나 서비스를 제공하는 컴퓨터 프로그램, 요청을 받으면 데이터를 보내주는 기계 ⭑클라이언트(client): 서버를 네트워크를 통해 사용하는 컴퓨터, 서버를 이용하는 사용자(컴퓨터) ⭑마크업 : 태그를 사용해 표시하는 것 ex) ⭑웹 편집기 : 노트패드++, 에디트플러스, 코다, 텍스트 메이트(잘 사용X),..

티스토리툴바