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..
포이머 웹 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 ..
HTML 1.프론트엔드 개발자 학습 방향 꾸준히 할것 즐길것 본인의 수준보다 높은 공부를 계속할것 2.HTML5 기본 문법 https://poiemaweb.com/html5-syntax HTML5에 추가된것 : 멀티미디어, 그래픽, 통신, 디바이스접근 오프라인 및 저장소, 시맨틱 태그, CSS3 HTML5문서는 안에 와 태그로 구성되어있다. 태그는 요소(element)와 속성(attribute) 으로 이루어져있다. 3.시맨틱 요소와 검색 엔진 https://poiemaweb.com/html5-semantic-web SEO(검색엔진 최적화), 검색엔진의 크롤링을 위해 시맨틱 태그를 사용한다. 개발자가 의도한 요소의 의미가 명확하게 드러난다. 코드의 가독성을 높이고 유지보수를 쉽게한다. 브라우저, 검색엔진,..
웹 사이트에서 폰트의 힘은 대단하다. 폰트하나로 디자인도 가능하고 느낌이 확 달라지기 때문, 구글 폰트를 애용하는 편이다! 저작권도 확실히 표기되어있고 단순히 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..
오늘까지 고민했다. 사이드바로 간단하게해서 대충 할지 아니면 정성스럽게 상 하단 고정 메뉴바를 만들어 이용할지 결론은 아직 시간이 남아있고, 모바일에서 반응형으로 사용하기 좋게, 어플처럼 만들어 보자였다. 중요한건 top,bottom모두 fixed속성을 이용해 주어야했다. 특정 사이즈에서 반응형을 사용하는것과 windowsize를 이용하는것ㅇ느 https://flykimjiwon.tistory.com/120 을 참고하고 중요한건 fixed속성을 이용한 방법이다. -> css속성에 position:fixed를 사용하고 top,bottom,right,left속성을 이용해 위치를 고정시켜주면 된다. - 참고한링크 https://www.w3schools.com/howto/howto_css_fixed_sideba..
지금 진행중인 프로젝트에서 상단은 속성 하나로 줄을 구분해 주었지만, 하단에서는 hr속성을 사용하기가 조금 곤란했다. 그래서 div를 하나만들어주고 상단에 라인을 만들어줘 고정시키면 되겠다고 생각했다. 중요한건 div 상단이건 하단이건 div박스 자체에 border속성을 주는 방법을 알아야 한다는 것이 었다. 그저 div에다가 border-top: solid; 이런식으로 속성을주고 원하면 px지정 및 색상까지 정해줄 수 있다. - 참고한사이트 https://developer.mozilla.org/ko/docs/Web/CSS/border-top
현재 진행하고 있는 프로젝트 첫화면에 하단 메뉴바를 만드는데, 동일한 가격으로 div속성을 주고 싶었다. 쉽가 말하면 저 4개의 버튼을 같은 간격으로 배치하고 싶었다는 거다. 2 4 이와같은 형태로 구성했고, .bigbox{ justify-content: space-evenly; } 이와같이 큰 div에다가 space-evenvly 속성을 주어 균등하게 배치했다. 이와같이 배치 되어지게 해주는 evenvly! - 참고한링크 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content justify-content - CSS: Cascading Style Sheets | MDN The CSS justify-content property defines h..
오늘만 margin을사용해서 몇번을 간격조절 했는지 모른다. 빈 div태그를 만들어 className을 주고 마진을 이용 했을정도로 간격을 만들때 중요한 margin... margin은 기본적으로 1)margin : 원하는px 그럼 상하좌우 전부 공백이 늘어난다. 2)margin-left, margin-right, margin-bottom, margin-top 이렇게도 개별 설정할 수 있다. 참고한링크 https://developer.mozilla.org/ko/docs/Web/CSS/margin margin - CSS: Cascading Style Sheets | MDN margin CSS 속성은 요소의 네 방향 바깥 여백 영역을 설정합니다. margin-top, margin-right, margin-b..