본문 바로가기

전체 글

 (265)
table 표 작성법 *기본 구성 →표 전체 묶음 ....행 제목 데이터 *분류 구성 - >>순번, 제목,작성자, 작성일 등 제목 - >>헤드(제목 작성자 이런거)뺀 내용 즉 데이터, 생략해도됨 어차피 티헤드랑 티풋이 없으면 구분할 필요가 없으니까. - >>티헤드나 티풋이 없는 표도 있고 순서가 바뀐 표도 있음, 필수는 아님. (구분할때 사용) *행이나 열의 어디에 해당하는지 구분하기 ex) →열(세로) →행(가로) >>웹 접근성을 위해 사용 *행, 열 합치는 방법 ex) →열2개를 합쳐서 행1개로 만든다. →행3개를 합쳐서 열1개로 만든다. *colgroup으로 특정 col에 스타일 적용시키기 *이중선 안되게 표의 선 정리하기 -table 에 css로 border-collapse:collapse; 속성 >table 안에 t..
배경 이미지 사용법 *배경 -border부터 배경이 깔림, 포함된 영역이기때문(만약 도트선이면 아래에도 색칠해져있음) -margin은 안깔림, padding은 깔림 *background-color: 배경색 지정 -16진수#000..., rgb(0,255,0), rgba, 색상이름 *백그라운드로 이미지깔고 조정하기 background-image:url(down/image/ball.png); -이미지깔리는게 패딩부터 디폴트 -괄호안에 'img.png'이렇게 따옴표 붙여도 되고 안 붙여도 됨 *background-repeat 배경이미지 반복 조정 -repeat; repeat-x(가로), repeat-y(세로), no-repeat 로 조정 *배경어디부터 깔지 정하기 background-clip:padding-box;/*선포함x 그..
태그 호출 사용법 *h2에 붙은 클래스title3의 태그를 쓸때 ex) h2.title3{color:red;} *복수 선택할때(ctrl+shift처럼) ex) .list1, .list1, .list3{} *.subtitle이면서. subtitle.2인 애를 태그하고 싶을때는 안띄고 ex) .subtitle.subtitle.2 *하위요소 : 밑에 있는거 전부 ex).list2 li span *자식요소: 바로 밑에 자식 ex)list2>li>span일 경우에 .list2>span 불가능 /.list2>li 가능
class 와 id 태그 호출할때 사용됨 class *class -여러개 사용 가능 - .class이름 으로 사용 *class 여러개 쓰고 싶을때는 한칸 띄기 ex) *h2에 붙은 클래스title3의 태그를 쓸때 ex) h2.title3{color:red;} *복수 선택할때(ctrl+shift처럼) ex) .list1, .list1, .list3{} *.subtitle이면서. subtitle.2인 애를 태그하고 싶을때는 안띄고 ex) .subtitle.subtitle.2 id *id -하나만 사용 가능 -#아이디명 으로 사용
이미지- 이미지 가운데 배치하기, 이미지 포지션으로 조정해 해당 영역만 보이게 하기 *이미지는 인라인 요소이지만 예외로 넓이와 높이가 적용됨 *이미지 가운데배치 방법 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),..

티스토리툴바