HTML , CSS

CSS 조금밖에 적지를 못했지만 여러 태그들을 제 기준에서 요약정리만 만들어 보았습니다. 물론 잘 적지는 못했습니다 . 태그 선택자와 태그 우선순위 margin , border , padding ,content영역 background font, text text - 중앙 정렬 list-style position display visibillity border와 radius float 2차원 함수와 3차원 함수 @keyframes와 animation

position 속성 static 기본,좌표없음 absolute(절대좌표) 웹브라우저 화면에 좌표가 생김 (left / top / right / bottom) left / top 을 이용해서 태그를 이동시킬수 있음 한마디로 (0,0) = 웹브라우저 왼쪽/위 모서리부터 시작 참고 : 다른 태그들을 무시함 relative(상대좌표) 현재 태그가 있는 위치부터 (0,0)이 시작됨 (left / top / right / bottom) 참고 : 태그가 있으면 밑으로 감 부모(relative) 와 자식 (absolute) 활용 자식 div 태그에 absolute의 (0,0)이 웹브라우저가 아닌 부모 div박스의 왼쪽/위 모서리로 변경된다. fixed(고정) 좌표를 사용이 가능하다 (left / top / right..

Block 속성 줄바꿈이 발생한다 주요 태그들 = p ,h1 ~ h6 , div 등 Inline 속성 줄 바꿈이 없다, width , height 속성을 무시한다 , 안의 content(글)에 따라 크기가 정해진다 주요 태그 = span 예제 ) html - {box1~3 = 홍길동} 를 적어보았음 Block 속성 width 와 height 를 지정할 수 있다. 또한 줄바꿈이 생긴다. Inline 속성 width 속성과 height 속성을 아예 무시해버린다. 그리고 줄바꿈이 없다. 따라서 컨텐츠(글)의 크기에 따라 달라지는데 만약 컨텐츠에 아무 말도 없다면? 아무것도 안보이니 border를 좀 넣어보자 정말 아무것도 안뜬다 inline-block 속성 줄바꿈이 없으면서 block속성(width 와 hei..

일단 css파일을 만들어 주면 편하게 사용할수 있다. 주석 단축키 : ctrl + / css 기본 사용법 : 태그선택자 { 속성 : 값; } 선택자란? 기본 선택자 = html 태그 선택자 라고 하고 , 등등을 말한다 전체선택자(wildcard) = * (자식)선택자 { 속성 : 값; } 반응 선택자 = 선택자:hover - 마우스가 위로 올라가면 디자인 적용 (주로 input) / 선택자:active - 마우스를 클릭하면 디자인 적용 상태 선택자 = 선택자:enabled : 현재 입력 가능한 상태일때 디자인 적용 (주로 input) / 선택자:disabled : 현재 입력 불가능한 상태 -디자인 적용 / 선택자:focus : 커서가 있을때(포커스) 디자인 적용 구조 선택자 = 선택자: nth-child..

현대 HTML5에서 사용하는 시멘틱 태그 header(머리말), nav(메뉴), section(본문), article(소본문), aside(사이드바), footer(꼬리말) 예시)

input 양식 type(형태)의 종류 text / password / checkbox / radio / file / hidden / button ★ radio의 name은 2개의 변수명이 일치해야 정상적으로 동작함 ★ hidden은 특수 용도로 사용됨 Label 양식 *** (참고.. 안해도 되긴함 ㅎ..) ※ Input과 Label 연결 - for ="변수명" == id="변수명" 이 같으면 태그들이 연결이 된다. Select - 여러개의 목록이 있는 태그이다 option으로 옵션 만들어줌 양식 ↓ 결과 optgroup (optioin group) 태그 - 목록에 그룹명 부여 결과 ↓ Multiple 속성 여러개를 한번해 선택할수 있게함 Textarea 텍스트 창을 만듬 html 특수태그들 ..

여러 키워드 1. 글 또는 그림등 2. taget 속성 target 속성이란 링크를 클릭할때 창에 대한 여부를 설정합니다 ​ _self : 링크 클릭 후 해당 창에서 열기 _blank : 링크 새창으로 열기 _parent : 부모창에서 열기 (부모 창이 없는 경우 _self 속성 처리) _top : 전체 브라우저 창에서 가장 상위 창 열기(부모 창이 없는 경우 _self 속성 처리) ​ ​ 3. title 속성 title 속성은 링크에 마우스 커서를 올릴때 도움말 설명이 나오게 할 수 있습니다. ex) 네이버 다움 구글 연결 ex2) (authorinner 웹페이지) 내부 연결 여러 글자 모양 태그 , , , , , , , , , 등 순서가 있는 목록 과 순서가 없는 목록 리스트를 만드는 표를 만드는 행..