본문 바로가기

css8

[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] CSS 기초 2 - ( week 1) 자주 사용하는 css를 사용해서 로그인 페이지를 꾸며보도록 한다. 예제에는 이미지가 들어가 있고 그 안에 텍스트가 들어가 있는 형태이다. 그리고 그 아래 아이디와 비밀번호를 입력하는 공간이 있고 그 아래 버튼이 있다. 이미지를 넣기 위해서는 공간이 필요한데 이럴 때 필요한 것은 div 태그이다. 우선 공간을 마련하고 그 안에 텍스트를 넣어본다. .mytitle{ background-color: green; color: white; } Login Page Please input ID and Password ID : PW : Login div 태그로 공간을 만들고 그 안에 h1, h5 태그로 텍스트를 넣어준다. div에 class를 지정해서 수정하여 그 안에 텍스트들이 함께 효과가 적용되도록 한다. 그리고 .. 2023. 4. 6.
[Web] CSS 기초 1 - ( week 1) CSS html이 웹 페이지의 뼈대를 만드는 역할은 한다면 css는 꾸미는 기능을 한다. 특정 html의 태그를 꾸미기 위해서는 우선 어떤 태그를 꾸밀것인지 특정 시키는게 필요하다. 방법은 태그의 class 속성을 사용해서 원하는 문자열로 이름을 지정하고 이를 사용해 태그를 특정할 수 있다. ~ .mytitle{ color : red; font-size: 40px; } Login Page ID : PW : Login h1 태그에 class 속성으로 이름을 지정하고 해당 이름을 가지고 css로 꾸민다. 태그는 css를 사용하여 웹 페이지의 스타일을 정의하는 태그이다. 이러한 태그를 head에 정의하는 이유는 웹 브라우저가 문서를 로드할 때 head 태그 내에 있는 요소들을 먼저 읽어들이기 때문에 이러한 부.. 2023. 4. 6.