본문 바로가기

전체 글75

[Web] Spartapedia - ( week 1 ) 지금까지 배운 내용들을 사용해서 영화를 모아서 볼 수 있는 페이지를 만들어본다. 우선 영역을 정의하고 그 안에 텍스트와 버튼을 넣어준다. Best movies in my life Add Movie div영역의 높이를 조절해 주고 안에 있는 요소들을 가운데로 정렬시켜 주도록 한다. display: flex; flex-direction: column; align-items: center; justify-content: center; 위 코드는 일반적으로 붙어 다니는 코드로 자주 사용된다. display : flex를 사용하면 해당 요소는 Flexbox 컨테이너가 되고 그 안에 있는 자식들은 아이템이 된다. flex-direction은 정렬시킬 방향을 정할 수 있다. align-items를 통해서 플렉스박스 .. 2023. 4. 7.
[Web] Bootstrap - ( week 1 ) 부트스트랩 CSS를 다루는 방법을 알더라도 잘 꾸미는 것은 별개의 일이다. 부트스트랩은 잘만든 CSS를 미리 모아둔 것으로 미적 감각이 없더라도 선택만 잘하면 페이지를 잘 꾸밀 수 있게 된다. 부트스트랩을 사용하기 위해서는 외부에서 파일을 가져와야 하는데 다음과 같이 가져올 수 있다. 태그를 통해서 CSS를 가져올 경로를 설정하고 를 통해 가져올 수 있도록 만든다. 해당 코드를 추가한 다음 CSS를 모아놓은 페이지를 방문해서 코드를 통해서 가져올 수 있다. bootstrap 페이지에서 사용하고자 하는 코드를 복사해서 내 html에 붙여놓도록한다. 그러면 선택한 디자인과 작동방식의 버튼을 만들 수 있게 된다. 버튼 이외에도 CSS로 꾸며진 다양한 태그들을 얻을 수 있기 때문에 웹 개발에 상당한 편의성을 제.. 2023. 4. 7.
[Web] 주석과 파일분리 - ( week 1) 주석 주석은 개발자 즉, 사람에게는 보이지만 실행 시 컴퓨터는 읽을 수 없는 코드를 말한다. 필요 없어진 코드를 삭제하는 대신 임시로 작동을 못하게 하고 싶을 때나 간단한 설명을 붙여두기 위해서 사용한다. html의 경우 로 주석처리하고자 하는 텍스트를 감싸서 처리하며 css는 /* */ 를 사용한다. @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); * { font-family: 'VT323', monospace; } .mytitle{ /* title */ background-color: green; } 사용중인 프로그래밍 언어마다 주석을 사용하는 방식이 다른데 주석 처리를 간단히 할 수 있는 방법은 단축키를 활용하는.. 2023. 4. 7.
[Web] 구글 웹 폰트 - ( week 1) 구글에서 제공하는 웹 폰트를 사용하면 웹 페이지에 원하는 폰트를 적용할 수 있다. Google Web Font 해당 사이트에 방문해서 원하는 폰트를 선택한다. 옆에 떠있는 창에서 @import를 선택하고 style 태그 사이에 있는 코드를 복사해서 작성 중이던 코드의 style 태그 내부 최상단에 붙여 넣기 해준다. 다시 폰트 사이트로 돌가서 이번엔 CSS rules to specify families 코드를 복사한다. 그리고 이번엔 * 를 사용하여 대상을 지정하고 다음과 같이 코드를 추가해 준다. @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); * { font-family: 'VT323', monospace; } *.. 2023. 4. 7.

티스토리툴바