HTML,CSS31 HTML, CSS 기초 float, inline-block - float을 이용한 레이아웃 만들기 이와같은 레이아웃을 만들기위해 먼저 크게 Container를 만들어준다. 그리고 그안에 순서대로 header, left-menu, right, footer를 만들어주는데 div를 사용하게되면 기본 display:block 속성이기때문에 원하는대로 만들 수 없음 이때 float을 사용한다.float을 사용해 중간에 좌측 메뉴바, 우측 content 공간을 만들어주고 최종적으로 footer쪽은 clear:both를 이용해 float의 영향을 받지 않은체 레이아웃을 만들 수 있다. .container{ width: 800px; } .header{ width: 100%; /* 부모 태그 width의 100% */ height: 100px; background:aquamar.. 2023. 4. 21. HTML, CSS 기초(간단 프로필제작) p, span, 셀렉터, div, 정렬등.. 이상하리만큼 다시 HTML,CSS 공부를하게되면 내가 작아지는 느낌이든다. 기초라고 생각하지만 늘 잊어먹는 언어들..심기일전 하는 마음으로다시 기초부터 한번싹 공부를 하고 기록해보자. 특히 사소하지만 잊고 있던거, 주요한 내용들 최대한 한번더 봐보도록하자 - HTML은 마크업언어 자료의 구조를 표현하기 위한 언어 안녕하세요2 글자는 p안에 써야한다. - 태그 스타일 1)스타일은 각 태그에 인라인으로 줄 수 있다. 스타일 속성은 매우 다양함 하지만 그때 그때 검색해서 찾아쓰는게 맞다. 김지원 Front-end Developer 태그는 글자안에 쓰는 의미없는태그, inline 속성을 가지고 있다. inline을 가지고 있는 요소는 폭, 높이등을 단독으로 조절할 수 없어서 겉에 태그 등에 주어야 한다. 그리고.. 2023. 4. 21. 포이머웹(poiemaweb) CSS 정리 12~22 12. 그림자(Shadow) https://poiemaweb.com/css3-shadow 텍스트나 요소에 그림자 효과를 부여하기 위한 프로퍼티를 선언한다. test-shadow : 텍스트에 그림자 효과를 부여하는 프로퍼티 box-shadow: 요소에 그림자 효과를 부여하는 프로퍼티 13. 그레이디언트(Gradient) https://poiemaweb.com/css3-gradient 2가지 이상의 색상을 혼합하여 부드러운 색감의 배경등을 생성하는것 선형 그레이디언트(Linear) 방사형 그레이디언트(Radial) 대부분의 브라우저에서 벤더프리픽스를 사용하여야한다. 그레이디언트는 직접 작성보다는 툴을 이용하는것이 보편적이다. 14.트랜지션(Transition) https://poiemaweb.com/css3.. 2022. 6. 28. 포이머웹(poiemaweb) CSS 정리 1~11 포이머 웹 CSS 1.CSS 기본문법 https://poiemaweb.com/css3-syntax 셀렉터(원하는 HTML요소를 정의) 프로퍼티와 밸류 (속성,속성값) 셀렉터 {}내에 속성,값으로 정의된것 링크스타일, 임베드 스타일, 인라인 스타일 Reset CSS : 각 브라우저별로 내장, 디폴트값이 다르기 때문에 맞춰주기 위함 2.셀렉터 https://poiemaweb.com/css3-selector 전체 셀렉터(*) : HTML 문서 내의 모든 요소를 선택 태그 셀렉터: 지정된 태그명을 가지는 요소를 선택한다. ex) p {color:red} ID셀렉터(#):id 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. 중복X 유일한값 ex) #p1 { color :red } 클래스 셀렉터: .class .. 2022. 6. 22. 포이머웹(poiemaweb) HTML 정리 HTML 1.프론트엔드 개발자 학습 방향 꾸준히 할것 즐길것 본인의 수준보다 높은 공부를 계속할것 2.HTML5 기본 문법 https://poiemaweb.com/html5-syntax HTML5에 추가된것 : 멀티미디어, 그래픽, 통신, 디바이스접근 오프라인 및 저장소, 시맨틱 태그, CSS3 HTML5문서는 안에 와 태그로 구성되어있다. 태그는 요소(element)와 속성(attribute) 으로 이루어져있다. 3.시맨틱 요소와 검색 엔진 https://poiemaweb.com/html5-semantic-web SEO(검색엔진 최적화), 검색엔진의 크롤링을 위해 시맨틱 태그를 사용한다. 개발자가 의도한 요소의 의미가 명확하게 드러난다. 코드의 가독성을 높이고 유지보수를 쉽게한다. 브라우저, 검색엔진,.. 2022. 6. 20. 웹사이트 폰트 바꿔 사용하기 (feat.구글폰트) 웹 사이트에서 폰트의 힘은 대단하다. 폰트하나로 디자인도 가능하고 느낌이 확 달라지기 때문, 구글 폰트를 애용하는 편이다! 저작권도 확실히 표기되어있고 단순히 link태그나 import해와 쉽게 사용할 수 있다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 이렇게 구글 폰트 사이트로 들어가서 원하는 폰트들이 있으면 클릭해서 들어가서 하단으로 내려가 +Select this Style 를 클릭해준다. 그러면 우측에 이와같이 추가한 폰트들을 한번에 사용할 수 있게 알아서 코드를 만들어주고 link태그를 가져와사용하거나 Next.j.. 2022. 4. 2. 이전 1 2 3 4 5 6 다음
