- 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..
이상하리만큼 다시 HTML,CSS 공부를하게되면 내가 작아지는 느낌이든다. 기초라고 생각하지만 늘 잊어먹는 언어들..심기일전 하는 마음으로다시 기초부터 한번싹 공부를 하고 기록해보자. 특히 사소하지만 잊고 있던거, 주요한 내용들 최대한 한번더 봐보도록하자 - HTML은 마크업언어 자료의 구조를 표현하기 위한 언어 안녕하세요2 글자는 p안에 써야한다. - 태그 스타일 1)스타일은 각 태그에 인라인으로 줄 수 있다. 스타일 속성은 매우 다양함 하지만 그때 그때 검색해서 찾아쓰는게 맞다. 김지원 Front-end Developer 태그는 글자안에 쓰는 의미없는태그, inline 속성을 가지고 있다. inline을 가지고 있는 요소는 폭, 높이등을 단독으로 조절할 수 없어서 겉에 태그 등에 주어야 한다. 그리고..
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 ..
이와같이 반응형 창에서 각 이미지의 간격 픽셀을 다르게 주고싶었다. 보면 좌우 좌우를 반복하면서 약간의 지그지그 형태로 배치해 주었는데, 핸드폰 화면에서 더 넓게 배치하면 이미지가 겹쳐 보기힘들어지고, 큰화면에서 좌우 간격을 좁게 배치하자니 좀 보기가 좋지 않았다. 그래서 화면별로 지그재그 간격을 다르게 해주기 위해 사용한게 변수로 css설정을 해주자! 였다. const [reactive, setReactive] = useState('40px') const [reactive2, setReactive2] = useState('80px') useEffect(() => { if (size.width 768) { // setSizeon(false) setReactive('40px') setReactive2('8..
과거 이와같이 만들어서 효과를 사용했었는데 다시 만들 필요성이 있었다. 그리고 좀더 부드럽게 만들고 싶었다. 아래와같이 다시 만들게 됬는데 추후 스타일링은 다시 해야할거 같다. 사용한 CSS애니메이션 스타일은 이와같이 사용했다. next.js의 style jsx안에서 사용했고, 어디서 사용해도 크게 다를건없다. 다만 좀더 디테일하게 설정한 부분이 두 가지 있다. 단어 태그하나하나당 div로 감싸서 사용하기도 했지만 각 단어에 위아래 움직이는 효과를 주지않고 한 묶음으로 아래와 같이 묶어서 사용해줬다. #꼬들 #탱글 #쫄깃 #파 #달걀 #소고기 그렇게 묶어서 사용해줘야 다시 단어 하나하나 마다 좌우로 배치해줘서 자연스러운 position설정이 가능했다. .side{ position:relative; lef..
버튼을 여러개만들어서 div를 보여줄 수 있는데 그냥 탭만들기라고 명칭, 쉽게말하면 그냥 버튼1,2,3 그리고 탭 1,2,3 이렇게 연결하는걸 말함 return ( 버튼0 버튼1 버튼2 내용0 내용1 내용2 ) 이런식으로 되어있는걸 부트스트랩을 써도되고, 그냥 버튼을 사용해도됨 방식은 useState를 사용해 어떤 버튼을 눌렀는지 state로 저장해두고 상태에 따라 div를 조건문으로 보였다 안보였다 해주면됨 on/off가 아닌 버튼 숫자를 저장하면 된다. let [누른탭, 누른탭변경] = useState(0); .......... { 스위치변경(false);누른탭변경(0)} }>Active { 스위치변경(false);누른탭변경(1)} }>Option 2 { 스위치변경(false);누른탭변경(2)} }>..