keembloo

웹 브라우저의 레이아웃을 나눌 때 여러 방법 중 하나인 Flex에 대해서 정리하려고 한다. css에서 flex 입력하기 1. html에서 class 속성을 부여한다. 박 스 2. css에서 flexbox에 flex 속성을 부여한다. .flexbox{ display: flex; } 3. 그리고 이어서 css에 필요한 이펙트들 태그를 넣어본다. .flexbox{ display: flex; width: 300px; height: 200px; border: 1px solid black; } 크롬에서 flex 속성 확인하여 미리보기 4. 크롬에서 F12를 눌러보면 브라우저 속성을 알 수 있는데 style탭에서 내가 준 flex 단어 옆 버튼이 보인다. 5. 버튼을 누르면 flex와 관련된 속성을 미리 알 수 있다..

reset CSS란? 웹브라우저마다 default 값으로 스타일이 알아서 적용된다. ex) 입력하지 않아도 브라우저에서 자동으로 margin 값이 적용되는 경우 이는 브라우저마다 다르게 보여질 수 있기 때문에 CSS 스타일을 통일하여 보여줄 필요가 있다. default 값을 초기화 하기 위해 필요한 것이 reset css이다. reset CSS하는 방법 1. 구글에 [reset css] 를 검색하고 초기화 하는 코드를 찾는다. https://cssdeck.com/blog/scripts/eric-meyer-reset-css/ Eric Meyer’s “Reset CSS” 2.0 | CSS Reset One of the pioneers of the method, Eric Meyer's CSS Reset is ..

내용은 body 태그에 쓰면 되는데, 그렇다면 head 태그에는 무엇을 쓸까? head 태그 구성 요소 1. css 파일 link 2. style 3. title 4. meta 5. favicon :ico head 태그는 위5가지로 구성된다. meta란? meta는 웹브라우저의 정보를 알려준다. 어떠한 방식으로 렌더링이 되었는지, 누가 만들었는지, 어떠한 내용을 담고 있는지 등을 설명할 수 있다. 사용자의 눈에는 보이지 않는다. favicon이란? 웹페이지 상단 첫번째에 나오는 아이콘을 말한다. 브라우저마다 파비콘 별도 지정이 필요하다. https://www.favicon-generator.org/ 이 사이트에서 파비콘을 기기 or 브라우저 별로 한꺼번에 코드를 만들 수 있다. Favicon & App ..

form 태그 Form 태그는 정보를 제출할 때 사용한다. Form 태그는 action 속성과 method 속성을 필수적으로 가지고 있어야한다. 1)aciton 속성 태그에서 type="submit"에 의해 정보가 제출되었을때 어디로 요청을 보내줄지 정보를 나타내는 경로이다. ex) 로그인 버튼을 누르면 나타는 페이지는 000에 있어~ 2)method 속성 form 태그가 제출되었을 때 어떠한 방식으로 정보를 전달할지 알려주는 것이다. html에서 가능한 방식은 2가지이다. get : 사용자가 적은 정보를 url에 나타낸다. post : 사용자가 적은 정보를 url에 나타내지 않는다. get의 실제 사용 예 ) 네이버 검색할 때 url에 검색한 단어가 적혀진 것을 확인 할 수 있다. Post의 경우는 서..