분류 전체보기 (153) 썸네일형 리스트형 [html] table 표 (2)_구조를 나타내는 태그 / 세로 줄을 동일하게 스타일링하는 <colgrop> <col/> 표의 구조는 으로 나눠진다. : 표의 최상단에 위치하고 보통 제목영역을 나타냄 : 표의 제목에 따른 내용들을 나타내는 영역 : 표 내용에 따른 요약내용을 나타내는 영역으로 필수사항은 아니다. [기본형] ↓table> caption> 표의 구조 caption> colgroup> col class="bgcolor" width="50px" /> col span="2" class="bgcolor2" /> colgroup> thead> tr> th>번호th> th>제목th> th>작성일th> tr> thead> .. [html] table 표 태그 trtable 표의 행(줄)td칸th표의 제목 caption 표 제목 / 제목이 표의 가운데 정렬된다. / table 열린 태그의 바로 아래에 쓴다. figcaption 표 제목 / 제목이 표의 왼쪽에 붙어있다. / table 열린 태그의 위나 닫힌 태그의 아래에 쓴다. colspan 표를 가로로 합치는 속성 / 내용 rowspan표를 세로로 합치는 속성 / td rowspan="3">내용 border-collapse; 표의 줄을 하나로 합쳐준다 (css 속성) border-collapse: collapse;: block 속성 내용 tr: 행(줄) table row의 약자 td: 열(칸),내용 (table .. [html] 멀티미디어 파일 - audio / video https://www.gettyimagesbank.com/?utm_source=google&utm_medium=gsa&utm_campaign=GSA_%EC%9E%90%EC%82%AC%EB%AA%85&utm_content=GIB_%ED%82%A4%EC%9B%8C%EB%93%9C&utm_term=%7Bkeyword%7D&ACE_REF=adwords_g&ACE_KW=%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%B1%85%ED%81%AC&gad_source=1&gclid=Cj0KCQjwvb-zBhCmARIsAAfUI2u03lowS_E85KEgjF5-dVfFU-cYEAWV7_bVvPQ5TGxhk7CLp82XcIMaAq3mEALw_wcB 게티이미지뱅크 - 사진, 일러스트, 그래픽이미지, 파워포인트, 동영.. 2차 메뉴가 있는 header 구성해보기 css 초기화 하기 전 구조를 다 짠 모습이 이렇게 보여야한다. 2차 메뉴 구조 코딩 ↓더보기 kakao 소개 menu menu menu 이야기 menu menu menu .. 1차 메뉴만 있는 Header 구성해보기 fit-content : width / heihgt를 얼마나 해야할지 모를때, 넓이높이를 자식 요소에 맞춰 감싼다.overflow:hidden;은 컨텐츠 벗어난 부분을 숨기는데 fit-content는 안숨긴다. ex) width: fit-content; :not(선택자) : 괄호 안에 있는 선택자를 제외한 나머지 형제나 자식을 선택함. cursor: pointer; : 마우스를 올렸을 때 클릭할 수 있는 모양의 마우스 커서로 바꾼다. 1. 1차메뉴만 있는 headernav 메뉴들은 클릭하면 다른 페이지로 이동해야하니깐 각각 a태그를 연결해준다. ( 메뉴이름 )아이콘은 불러오는 방법이 다양한데, 여기선 이미지로 불러와준다. html ↓body> header id="head.. [CSS] position 위치 속성 position:static;기본값. 좌표인식할수 없다. position:relative;태그가 출력된 위치가 기준점. top:0; left:0;만 쓸 수 있다.position:absolute;부모박스가 없으면 브라우저를 기준점. 부모박스 있으면 부모박스의 왼쪽 상단 모서리 0 기준점position:fixed;해당 위치에 고정시킨다. ex) position:fixed; top:0; left:0; / 보고 있는 브라우저 화면 기준position:위치를 설정할 때 사용하는 속성위치 속성에는 절대 좌표와 상대 좌표라는 개념이 있다. 절대 좌표는 0점을 기준으로 움직이는 좌표를 말하며 (브라우저 0점 왼쪽 위 모서리) 상대 좌표는 태그가 출력된 위치를 기준으로 움직인다. [속성값] - static (ex. .. [html] 웹 표준 태그 semantic 태그 / 기초 구조 실습 div class 단축 단어 -> .클래스 이름웹 표준 태그로 구조를 쉽게 파악하고 큰 영역들을 잡는 구조 태그. ( 시멘트같은 역할 )검색 엔진 같은 프로그램에서 자료를 검색해 정보의 의미를 분석할 수 있게 도와주는 지능형 웹태그. 또한 시각 장애인들을 위한 웹 표준 방식. [시멘틱태그의 종류] :단독태그가 아니라서 뒤에 닫아줘야한다. --------------------------- 1. : 웹 페이지 최상단에 위치하는 태그. 보통 로고와 메뉴 검색창이나 로그인 영역이 들어감. 2. : 헤더에 들어가는 GNB영역과 같이 메뉴 부분을 표현할 때 사용함. 웹 페이지에 여러 개의 메뉴 영역이 들어갈 경우 #id 선택자로 구분함. 헤더뿐만 아니라 컨텐츠 영역 또는 푸터 부분에도 자유롭게 몇 개든 들어.. [CSS] Background 배경/ 투명도 opacity와 alpha / 그라디언트 / background-color배경 색background-image배경 이미지 background-image: url()background-repeat이미지 반복 여부 / no-repeat : 반복하지 않음. background-attachment배경을 스크롤에 따라 고정할지 같이 스크롤할지 정함.background-position 배경의 위치를 정함 background-position: center center;background-size배경 크기 cover / contain 정비율을 유지하면서 크기 조정background 한번에 줄 수 있다. background: url() 반복여부 가로위치 세로위치 사이즈opacity 영역 안에 포함된 border, 컨텐츠까지 모두 투명하게 만들고, 자식요소들까지 .. [CSS] 선택자 / 후손 선택자, 자손 선택자, 동위(형제)선택자, 속성 선택자, 반응 선택자hover active, 구조 선택자, 형제 구조 선택자, 상태 선택자, 시작문자 선택자, 가상요소 선택자 / :not(hover) 1. 후손 선택자 (공백)부모 안의 자식들을 선택하는 선택자. 부모 안의 자식들을 선택할 때 공백으로 표기하고 구분함.[기본형] 부모태그 자식태그{ 속성: 값; }ex) div p{ }div 안에 있는 p를 선택해 가져온다. div p{}어떤 div에 클래스를 지정해줬으면 클래스 이름으로 불러오고 그 뒤에 p를 써서 가져와준다. .box1 p{} div> p> span 순으로 불러와준다. div p span {}= html 문서 내의 모든 div 태그 안에 있는 span 태그를 선택함 클래스 .box1 안에 있는 p 안에 있는 span을 불러옴 실습) ul안에 클래스가 menu인 자식안에 a태그를 선택해주세요 조건1. ul 안에 자식은 4개가 있어야합니다 조건2. a태그에는 네이버가 새.. [CSS]★Overflow / 스크롤 / 마우스 드래그했을 때 색상 바꾸기 / 목록 스타일 속성 :박스 안에 컨텐츠가 많아 범위를 넘어갈 때 넘치는 부분을 어떻게 보여줄지 정하는 속성. - overflow: hidden; ★ : 1. height 속성이 지정되어 있을 경우 영역을 벗어나는 부분을 숨김 ( 글자는 영역높이를 계산해서 잡기 힘들기에 그때 사용한다. ) 2. height 속성이 지정되어 있지 않을 경우 컨텐츠에 맞춰 늘어남. - overflow: scroll; ★ : 영역을 벗어나는 부분은 스크롤 바를 나타나게 한다. - overflow: visidle; : 기본값으로 영역에서 벗어난 부분을 그대로 보여줌. - overflow: auto; ☆ : 컨텐츠가 박스를 넘어가지 않으면 스크롤바가 보이지 않고 컨텐츠가 박스를 넘어가면 스크.. 이전 1 ··· 9 10 11 12 13 14 15 16 다음
