HTML & CSS (6) 썸네일형 리스트형 CSS - float property css에서 selector에 주는 float property 값은 해당 요소를 일반적인 흐름으로부터 빠지고, 다른 요소들이 그 주위를 감싸며 배치되도록 만든다. float block 요소에게 float property를 넣어 inline 성질을 부여할 수 있다. 값으로는 none(default), left, right 등이 있다. 참고 링크 float: right이나 left 그 쪽에 자석같이 딱 붙음. 그 뒤에 오는 요소는 inline 요소 뒤에 넣었을 때처럼 나타난다. 뒤에 오는 요소에 float를 적용한 요소의 크기만큼 margin을 주면 영역이 분리된 것처럼 보인다. float가 적용된 요소에 width를 퍼센트로 줄 경우 window 크기가 그보다 작게 줄어들면 비율을 유지하며 같이 줄어든다. .. CSS - display property css에서 selector에 주는 display property 값은 해당 요소가 어떻게 나타나는지를 결정한다. 이 중 outer display type값으로 inline, block, inline-block 등이 있다. inline, block element 예시 inside display type값으로는 table, flex 등이 있다. (참고 링크) 요소를 숨기는 none도 있다. none에서 다른 값으로 바꾸면 없던 게 나타나는 것처럼 보인다. inline 공간을 content의 크기에 맞춘다. 줄바꿈을 하지 않는다. 행간(line-height)을 조절할 수 없다. 적용 불가: width, height, margin-top, margin-bottom, padding-top, padding-bott.. CSS - position property css에서 selector의 property로 줄 수 있는 position에는 대표적으로 4가지 값이 있다. 1. static 기본값. 코드 순서대로 보여준다. 2. relative top, right, bottom, left property를 반드시 사용해 원래 위치에서 상대적으로 그만큼 움직인다. 3. absolute 부모 요소에 대해 그 property 값과 같은 절대적인 위치를 가진다. top, right, bottom, left property를 이용한다. 부모 요소는 반드시 position 값을 갖고 있어야 되며, 일반적으로 relative를 부여한다. 돋보기 이미지를 input box 안에 배치하고자 한다. 부모 요소가 되는 div에 relative를 주고 img에 absolute를 넣어 d.. Semantic Web, Semantic Tag Semantic Web Data를 의미와 관련성을 나타내는 structured information으로 convert해 컴퓨터가 더 쉽게 처리할 수 있도록 하는 목적을 갖는 발상이다. 이를 통해 Web이 거대한 분산형 데이터베이스(distributed database)로 구축된다. 참고 링크 Sementic Web은 문서와 문서, app과 app 사이를 연결하는 게 아니라 문서의 근간이 되는 information들이 서로 연결되어 있는 Web of Data를 뜻한다. 참고 링크 cf. 정보를 연결하는 방식은 인터넷에 있는 수많은 문서들이 하이퍼링크로 연결된 Web 1.0 - Web of Documents, 그리고 data가 application단위로 나뉘어 있는 Web 2.0 - Application S.. HTML, CSS 꾸미기 보기 좋게 만들 때 쓸 것들. 기능 쪽은 이전 글. 꾸미기 관련은 그때그때 찾아쓰는데, 북마크해두었던 걸 모아봄. px, em, pt, % 등의 단위를 쓸 때 좀 맞춰줘야 적용됨. %는 부모요소의 크기 정보가 있어야 적용됨. 이럴 필요 없는 단위가 있었는데 뭐더라... padding, margin (솔직히 얘는 뇌가 싫어서 피해다니는듯) 참고 링크 input attribute text-align: input box 안에서 텍스트 정렬 letter-spacing: 자간 그 외 참고 css - input box 여러개를 한 줄로 넣기 (시뮬레이션 링크) input { display:inline; } font awesome 예제 참고 링크 버튼에 아이콘 넣기 table 만들기 참고 링크1 참고 링크2 tabl.. HTML, CSS 헷갈리는 부분들 html상의 tag에 attribute에 값 줄 때 = 사용. style이나 css에선 : 사용. html문 안에 css 섞을 때는 html상의 tag에 attribute(color, font-size, font-family 등) 추가하거나 head tag 사이에 style tag 넣어서 적용. = 말고 : 로 부여하고 ; 로 다른 attribute와 분리. head tag는 페이지 자체에 대한 정보값(title, meta, link). meta tag는 character set 뭐 쓰는지에 대한 것. self-closing tag. a tag는 href attribute에 url 또는 html 파일(상대경로 사용) 넣어서 하이퍼링크 거는 것. target attribute로 새 창에서 .. 이전 1 다음
