Programming/Frontend (HTML, CSS)
\n 개행문자를 넣어도 그냥 \n이 그대로 출력되었다 ㅠ그게아니라 엔터좀 쳐주라구!!!! 금지되는 식품(Haram) ㆍ 돼지/개와 그 부산물 및 유래 성분ㆍ 이슬람법에 의해 도축되지 않은 동물 ㆍ비할랄문질에 의해 오염된 것 ㆍ 해충 및 이와 유사한 생물 ㆍ술, 알콜성 음료 등국내 식당에서 할랄 인증이란?: 한국 이슬람교(KMF)의 인증을 받은 식당"> '할랄'이란? , , \r/n , HTML 특수문자 등 아무리 넣어도 안됐는데 찾아보니 중요한 속성을 넣어주어야 했다data-bs-html="true" ..
Bootstrap이란? : 미리 만들어진 CSS와 JavaScript를 통해 > CSS속성을 쉽게 적용할 수 있게 해주며, 표, 목록, 양식 등의 요소를 예쁘게 만들어주고, 이미 만들어진 다양한 UI를 활용할 수 있다. 1. Bootstrap 기본 1) Bootstrap을 HTML에 포함하기 - 본질은 CSS와 JS - 홈페이지에서 다운로드 받거나 - CDN(Content Delivery Network)을 통해서 바로 받아온다. Hello, world //body 끝자락에 적용 2) Text - CSS 속성을 class로 적용할 수 있게 만들어져 있다 !! - text-start : text-align: start; 적용 가능 text-start 적용 text-center 적용 text-end 적용 - ..
1. Layout : UI를 사용자가 보기 편하고 매력있게 배치하는 것. > layout을 만드는데 특화된 기능이 > flexbox 2. Flexbox : Flex는 요소를 정렬할 축을 만들고, 축을 기준으로 요소 배치. (기본값은 좌에서 우로) - display: flex; 적용하고, 자식 요소들을 만든다. - 주 축을 만들고 ~~~> 그 방향으로 요소들은 꽂는다라고 생각하면 됨 ! // flex container 0 // flex items 1 2 3 3. Flex Direction - flex-direction 속성 : 주축의 방향을 설정 row: 좌에서 우로 (기본값) column : 상에서 하로 row-reverse : 우에서 좌로 column-reverse : 하에서 상으로 - flex-wra..
1. Block & Inline - Block Element : 추가하면 줄바꿈 일어남/ 화면의 크기만큼 가로폭 차지. - Inline Element : 추가해도 줄바꿈 X / 내용의 크기만큼 폭을 차지. 2. CSS Box Model : 요소를 그릴 때 상자를 바탕으로 요소와 요소의 내용, 다른 요소들을 어떻게 그릴지 결정하는 방법. - content : 요소 내부 내용 - padding : 테두리부터 요소의 내용까지의 공간 - border : 요소의 테두리 - margin : 요소의 테두리부터 외부의 요소와의 공간 1) width & height - height (높이) : 차지할 수 있는 전체 공간 - width (너비) : 차지할 수 있는 전체 공간 - 속성을 주어 크기 조절 가능 2) margi..
CSS (Cascading Style Sheets)? : 표현, 즉 스타일(색, 글씨체, 크기 등)을 "표현"하기 위한 언어! (어떤 요소가 어떻게 보일지를 정의~) (글씨를 크게 하고 싶어서 h요소를 적용하는 것이 아니다.... HTML은 제목으로 설정하는 것임..!!! 글씨를 크게하고 싶다면 css를 설정해야 하는 것이다.) 1. CSS 적용하기 문법 어떤 요소를 선택해서 어떻게 변경할지 선언 - 선택자(selector) : 어떤 요소? - 선언(declaration) : 속성과 값을 정의 - 속성(property) : 어떤 표현을 변경할지 - 값(value) : 속성을 어떻게 변경할지 ~~> CSS 적용 방법 1) Inline CSS : HTML 요소에 직접 적용하기 - 빠르고 정확함. - 많은 반..
HTML (HyperText Markup Language) : 구조를 표현하기 위한 언어 1. 요소 (element) - HTML은 요소(element)로 이뤄진다 - 요소를 열면 닫아주기. 로 열면 로 닫아준다. - 태그(tag) : 요소를 정의해준다. 여는태그/닫는태그 - 내용(content) : 요소 안의 정보가 작성되는 부분 - 요소는 중첩해서 만들 수 있다. (계층적 구조) : HTML 문서 자체에 대한 정보(metadata)를 정의하기 위한 요소 : HTML 문서를 통해 사용자에게 전달하고 싶은 정보가 담기는 요소 2. 속성 (attribute) - 요소에 대한 추가 정보를 제공. - 이름 = "값" 형태로 작성 3. HTML Body 요소들 1) 문단 제목 (Headings) 2) 문단 (P..
인터넷과 웹 개발 1) 인터넷? - TCP/IP 통신을 기반으로 연결된 수많은 컴퓨터가 이루는 연결망(network) - 연결된 컴퓨터들이 서로 정해진 규칙을 바탕으로 데이터를 주고 받는다. - 인터넷 상에 제공되는 서비스를 개발하는 행위를 "웹 개발"이라고 부름. 2) Client-Server Model (or Architecture) - 인터넷 브라우저에서 보는 페이지 > 브라우저는 서로 다른 많은 페이지를 우리에게 제공한다. 인터넷을 통해 페이지를 달라고 요청을 하면 ---> 인터넷의 어떤 컴퓨터가 페이지를 응답해준다. 클라이언트 : 서비스를 요청하는 주체. 인터넷에 연결된 장치 혹은 소프트웨어 프로세스 서버 : 요청에 대한 적절한 응답을 하는 주체. 사용자에게 전송될 데이터(웹 페이지, 이미지 등..
** 타임리프란? : View에 해당하는 화면을 구현할 때 사용하는 템플릿 엔진 타임리프 뷰 템플릿 활용하기 1. ThymeleafViewResolver 등록하기 - Gradle - build.gradle 에 추가 implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' - Maven - pom.xml 에 추가 org.springframework.boot spring-boot-starter-thymeleaf 2. 타임리프를 사용할 html 파일에 태그 수정 ** 기초 문법 표현 설명 예제 @{ ... } url 링크 표현식 th:href = "@{/css/bootstrap.min.css}" | ... | 리터럴 대체 th:text =..
