CSS3 (5) 썸네일형 리스트형 [HTML/CSS] 검색창 만들기 검색창(SearchBox) 만들기 위와 같은 검색창을 만드는 html, css를 알아보겠다. 검색창을 만들기 위해서는 , , 태그가 필요하다. 추가로 돋보기 아이콘을 넣기 위해 Font Awesome이라는 사이트를 이용할것이다. 태그 먼저 form태그를 만들어준다. form태그는 폼에서 받아온 내용을 action 속성에 적힌 서버의 주소에 전달해주는 기능을 한다. 태그 검색어를 입력받을 상자를 만들어주기 위해 input태그를 이용한다. 텍스트를 입력받을것이므로 type은 text로 한다. 태그 검색창의 클릭 버튼을 구현하기 위해 태그를 사용했다. 클릭시에 입력된 내용이 제출되어야 하므로 type은 submit으로 한다. 지금은 버튼이 비어있는것을 볼 수 있다. 버튼에 돋보기 아이콘을 넣어 주기 위해서 F.. [CSS3] #2. 텍스트를 표현하는 다양한 스타일 텍스트와 관련된 스타일 텍스트 스타일 속성 color : 글자색을 지정합니다. text-decoration : 텍스트에 밑줄이나 취소선을 표시할지 여부를 지정합니다. text-transform : 텍스트 전체, 또는 첫 글자를 대문자로 표시합니다. text-shadow : 텍스트에 그림자를 추가합니다. letter-spacing : 글자 사이의 간격을 지정합니다. word-spacing : 단어 사이의 간격을 지정합니다. text-align : 텍스트 정렬 방법을 지정합니다. line-height : 줄 간격을 조절합니다. text-align 속성 text-align 속성은 텍스트 정렬 방법을 지정하는 속성이다. 속성값으로 center를 주면 텍스트가 가운데로 정렬된다. text-align속성의 속성값 .. [CSS3] #1.텍스트를 표현하는 다양한 스타일 글꼴 관련 스타일 * 글자와 관련된 속성 font-family : 글꼴 종류를 지정합니다. font-size : 글자 크기를 지정합니다. font-style : 글자를 이탤릭체로 표시할지 지정합니다. font-weight: 글자의 굵기를 지정합니다. em은 바탕체에서 영어대문자 M의 폭 크기만큼을 1em이라고한다. 1em = 16px 구글 폰트 사용하기 https://fonts.google.com 링크로 이동 여기서 language를 한글로 한뒤, 폰트를 찾는다. 맘에 드는 폰트가 있으면 import를 눌러서 복사한다. 복사한 import문을 태그 바로 밑에 붙여넣기 한다. style바로 다음에 넣어줘야 외부에서 먼저 끌어올 수 있다. 다시 fonts.google.com으로 가서 아까 복사한 import.. [CSS3] CSS3 선택자 CSS 선택자 선택자에 대해서 알아보겠다. h1 { color: blue; } 위에서 h1이 선택자이고 color는 속성, blue는 속성값이다. 선택자는 스타일을 적용할 태그를 선택해주는 것이다. 선택자에는 5가지 종류가 있다. 전체 선택자 타입 선택자 class 선택자 id 선택자 그룹 선택자 전체 선택자 전체선택자를 사용하면 모든 태그에 스타일이 적용된다. 웹문서에는 기본브라우저 스타일이 있다.(default style) 기본스타일을 초기화 시키고 싶을때, 전체선택자를 많이 사용한다. 모든 태그에 글자색 빨간색 적용 브라우저 기본스타일 초기화 이처럼 전체선택자는 웹문서 전체에 적용하는 선택자기 때문에, 브라우저의 기본스타일을 초기화시킬때 많이 사용한다. 타입 선택자 타입 선택자는 태그 선택자라고도 .. [CSS3] 외부 스타일시트, 내부 스타일시트, 인라인스타일 스타일은 웹문서에 디자인적인 요소를 추가하는것이다. 웹문서의 글꼴, 색상, 정렬, 배치방법처럼 겉모습을 결정지어주는 역할이 바로 스타일의 역할이다. 또 css의 장점은 반응형웹디자인을 할 수 있다는것이다. css에 있는 미디어쿼리를 이용하면 화면배치를 다르게 해줄 수 있다. 스타일시트는, 문서안에 사용된 스타일을 한군데 모아놓은것이다. 스타일시트를 만들때는 문서안에 만드는 내부스타일시트가있고, 묶어서 따로 파일로저장한것을 외부스타일시트라고 한다. 또한 처럼 내가 원하는 태그안에 style을 주는것을 인라인스타일이라고 한다. 내부스타일시트 : 웹문서에 태그 내에 입력 외부스타일시트 : 외부에 css파일로 저장해서, 웹문서에서 연결해서 쓰는 방식 인라인스타일 : 내가 스타일을 주고싶은 태그안에 style을 .. 이전 1 다음
