본문 바로가기
728x90

분류 전체보기104

HTML/CSS - Position 안녕하세요, 오늘은 position에 대해 정리하려 합니다. position 설정을 해주지 않으면 요소들은 static position 상태입니다. [포지셔닝이 안 된 요소] 여기 상태에서 Relative/Fixed/Absolute 등 position 설정이 가능합니다. [포지셔닝이 된 요소] ◆ Relative position : 원래 자신의 자리를 기준으로 위치를 잡는 것 위와 같이 blue 클래스에 relative 포지션을 적용하면 아래와 같이 결과가 나오게 됩니다. (blue 박스가 초기 위치에 상대적으로 이동하게 됩니다 [위로 50px, 왼쪽으로 70px 공간이 나오게 이동] ) ◆ Fixed position : 브라우저 윈도우를 기준으로 위치를 잡는 것 ◆ Absolute position : .. 2021. 5. 18.
MVC 패턴 CS 및 정처기 공부 DAY3. MVC패턴을 정리해보자. (우아한 Tech의 영상 참고 및 구글링을 통해 정리하였습니다!) 코드에 대한 유지보수가 편해지도록 구성하는 것 ◆ MVC(Model View Controller) -. 모델은 애플리케이션의 정보(데이터)를 나타내며, 뷰는 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타내고, 컨트롤러는 데이터와 비즈니스 로직 사이의 상호동작을 관리하는 역할을 한다. 즉, 모델은 데이터와 관련된 부분/ 뷰는 사용자한테 보이는 부분/ 컨트롤러는 모델과 뷰를 이어주는 부분입니다. 이렇게 3가지로 각각의 역할에 집중할 수 있게 한다면 유지보수성/확장성/유연성 증가 및 중복 코딩도 줄어들 것이다. ◆ MVC 패턴이 적용되는 순서 1. 유저가 Controll.. 2021. 5. 17.
HTML/CSS 가운데 정렬 정리 가운데 정렬이 너무 헷갈려서 display 요소별로 정리해놓으려 합니다. 가로 가운데 정렬 inline 요소 : inline 또는 inline-block 요소면 부모 태그에 text-align: center; block 요소 : margin-left: auto;, margin-right: auto; 사용 세로 가운데 정렬 1. vertical-align: middle; 이용해서 부모 요소의 텍스트와 가운데를 맞춘다 x Hello! My name is young. 2. 이것을 화면의 가운데로 정렬하려면 세로 길이가 100%인 요소를 만든 후 그 요소에도 vertical-align: middle; 적용 x Hello! My name is young. 또 다른 방법으로는. info를 inline-block으로.. 2021. 5. 16.
Internet / WEB/HTTP/응답 과정 CS 및 정처기 공부 DAY2. 인터넷/WEB/HTTP를 정리하고 실제로 웹 요청시 어떤 동작들이 일어나는지 정리해보자. ◆ 인터넷(Internet) -. 인터넷은 컴퓨터 네트워크들을 서로 연결해주는 범지구적 네트워크이다. -. 인터넷 위에서 다양한 서비스들이 동작한다 (WEB 또한 인터넷 위에서 동작하는 서비스 중 하나) ◆ WEB(World Wide Web) -. Server와 Client로 이루어져 있다. (클라이언트에서 서버로 요청하면 클라이언트에서 반응을 한다) -. 이때 클라이언트와 서버 사이의 HTTP(HyperText Transfer Protocol)이라는 규약을 지켜야한다. -. ◆ HTTP(HyperText Transfer Protocol) -. 웹 요청과 응답에 관한 클라이언트 ↔ 서.. 2021. 5. 15.