[WEB] CORS
2022. 6. 7. 20:02
programming/HTML, CSS
1. CORS(Cross Origin Resource Sharing)란? - 다른 출처 리소스 공유 - HTTP 요청은 기본적으로 Cross-Site HTTP Requests가 가능하다. - 하지만 Cross-Site HTTP Requests는 Same Origin Policy를 적용받기 때문에 요청이 불가하다. 그럼 Same Origin Policy는 뭐야? 먼저 Origin에 대해서 알아보자. Origin(출처)은 Protocol, Host, Port 번호까지 모두 합친 것을 의미한다. SOP (Same Origin Policy)? SOP는 지난 2011년, RFC 6454에서 처음 등장한 보안 정책으로 말 그대로 “같은 출처에서만 리소스를 공유할 수 있다”라는 규칙을 가진 정책이다. 그러나 웹이라는..
CSS 기본적으로 적용하기
2022. 5. 12. 16:18
programming/HTML, CSS
CSS 적용 순서 스타일을 만든다. HTML태그 선택 CSS 스타일을 HTML태그에 입히기 /* 예시 */ .text-red { color:red; } /* 스타일 이름 { 스타일 정의 정의한 스타일 내용 } */ CSS Reference - 속성 값 참조 https://www.w3schools.com/cssref/default.asp CSS Reference W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many mor..
html 자주 사용하는 태그들
2022. 5. 12. 15:58
programming/HTML, CSS
자주 사용하는 태그들 text text 로그인 링크주소로 이동 가장 기본적으로 자주 사용하는 태그들입니다.
[tip] 아이디어를 떠올리기 좋은 사이트
2021. 9. 14. 20:20
programming/HTML, CSS
너무 식상한 홈페이지를 만들 때가 있습니다. 항상 보던 느낌, 비슷한 레이아웃.. 그런 아이디어를 떠올리기 좋은 사이트들이 있습니다. 1. https://www.pinterest.co.kr Pinterest 요리법, 집 꾸미기 아이디어, 영감을 주는 스타일 등 시도해 볼 만한 아이디어를 찾아서 저장하세요. www.pinterest.co.kr 다양한 아이디어를 생각하게 해주는 사이트입니다. responsive website, website, responsive website layout 등을 검색해보시면 다양한 사람들의 아이디어가 있습니다. 참고해서 구현하면 좋겠죠. 2. https://dribbble.com/ Dribbble - Discover the World’s Top Designers & Creat..
[html] 반응형 html 페이지
2021. 9. 7. 19:58
programming/HTML, CSS
예전에는 데스크톱용 홈페이지만 만들었다고 하면 지금은 다양한 디바이스가 있습니다. .left { float:left; width:50% } .right { float:right; width:50% } html에서는 예전과 달리 고정된 px을 사용하지 않고 Flex grid %, Flex box vw, vh를 사용해서 구현합니다. 추가로 css에서 Media Queries를 이용해 모바일, 태블릿, 데스크톱 화면을 어떻게 보여줄 것인지 구성할 수 있습니다. 그래서 데스크톱, 태블릿, 모바일 화면을 생각하면서 만들어야 합니다. @media screen and (min-widht: 800px) { .container { widht: 50%; } }
[html] html 기본
2021. 8. 21. 14:15
programming/HTML, CSS
html은 브라우져에서 실행 가능한 가장 기본적인 파일입니다. - 상위태그 head -> 상세 설명이 들어가는 태그 body -> 사용자에게 보여지는 태그들로 이루어져 있는 태그 참고 사이트 https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org 전세계의 많은 웹개발자들이 확인하고 예제를 통해서 배우는 곳입니다. (html, css, javascript 등) * 예전에는 div로 ..
[basic] Markdown
2021. 8. 2. 12:00
programming/HTML, CSS
Git 에서 Readme를 작성할 때 Markdown으로 작성을 한다고 해서 Markdown을 배워보고자 포스팅하였습니다. 기본적인 markdown - # 에 h1은 밑에 라인이 자동으로 생긴다. - #은 1개부터 6개까지 적용 가능 - 라인을 추가할 때는 언더바(_) 3개 - quote는 > (이건 뭔가요? 에서 적용) - 링크와 이미지는 같은 방식 : click [링크](주소),  - table의 정렬은 : 위치가 중요함. : |:--|:--|:--|
[Emmet] Emmet 빠르게 마크업 하기 2
2021. 8. 1. 02:58
programming/HTML, CSS
- 그룹화 하기에는 () 를 사용한다. 위 이미지를 참고하면 div 안에 header가 있고 그 안에 ul가 있다. li 안에 a 태그가 7번 반복, header 옆에 footer가 있다. div>(header>ul>li*7>a)+footer>p 저렇게 입력하면 - 텍스트 입력하기 텍스트를 입력하기 위해서는 {} 를 사용하면 된다. 만약에 P태그 안에 Text area 라는 텍스트를 적고 싶다면 p>{text area} 라고 입력하면 된다. - 숫자를 자동으로 입력하기 위해서는 $ 사용 class 이름이 "class 숫자" 라는 p 태그 안에 "text 숫자" 라는 텍스트가 들어가는게 5번 반복되는 태그를 작성한다고 치면 (글로 표현하기가 좀 어려움) p.class${text $}*5라고 입력하면 된다...