IT 일기장

검색하다 우연히 구글 검색에 관한 이스터에그를 발견하게 됐는데 그 중 하나인 "do a barrel roll"이다. 구글 검색 이스터에그 검색하면 재밌는 기능들이 숨어있더라~ 공공기관 프로젝트 하면서 항상 정적인 것들만 다뤄서 심심했는데 이런거보면 또 재밌다. 아무튼 "do a barrel roll"이라는 단어를 구글에서 검색하면 아래 화면처럼 검색 결과 화면이 360도 돈다. 별거 아니지만 신기해서 비슷하게 구현을 해봤다. 어떻게 화면이 돌아가는지에 대한 원리만 알면되니까. 간단하게 div 영역잡고 해보자. welcome to "do a barrel roll"~ content class에 양념칠 해보자. CSS를 잘 몰라서 가운데 영역잡고 테두리랑 배경색 칠해주고 글자만 좀 크게.. .content {..

관리자 페이지 만들고 있었던 중 설문조사 대표 이미지 사용여부 부분이 [사용, 미사용] iCheck 부분과 [파일 선택] 부분이 너무 딱 붙어있는데.. 맘에 안든다. 좀 떨어져 있으면 좋겠다 싶어서 CSS를 찾아봤다 방법은 간단했는데 파일 선택 input box에 상단 여백을 주면 된다 #id or .class {margin-top:15px;}

저번에는 id 속성으로 CSS를 먹였었는데 이번엔 class 속성으로 먹였다. index.html My First CSS Example This is a paragraph style.css .center {text-align:center;color:blue;} 아직은 정말 쉽다 class 속성중 center라는 명을 가진 애들은 CSS를 먹일 수 있다. p tag 의 class 속성중 center라는 명을 가진 애들을 지정할수도 있다. style.css p.center {text-align:center;color:blue;} id 속성도 마찬가지지만 class 속성에 여러개 이름을 지정할 수 있다. 뭐 아직까지는 이해하는데 무리가 없다. index.html My First CSS Example This ..

내용은 태그에 속성을 주고 CSS를 줄 수 있다는 내용이다 1번째는 id 속성.. index.html My First CSS Example This is a paragraph style.css #para{text-align:center;color:blue;} 당연히 id 준곳에 CSS가 먹겠지 근데 궁금했던건 저 css에 p tag 옵션을 추가해주면 어떻게 될까? style.css #para{text-align:center;color:blue;} p{text-align:left;color:red;} id 속성에 준건 변하지 않고 아래 p tag만 변경됐다. p tag 소스를 먼저 적어도 마찬가지.

HTML과 CSS는 있는 소스에서 수정을 해본적은 있어도 직접 틀을 잡고 그려보거나 그런적이 없어서 어디서 접해보면 될지 막막하다가 W3SCHOOL에서 한번 해보기로 했다. 개발 툴은 Visual Studio Code로 해보고있다. 여기서는 html에다 style 태그 주고 하나로 만들던데.. 좀 지저분해보여서 css 파일 따로 하나 만들어서 해봤다. index.html My First CSS Example This is a paragraph style.css body{background-color:lightblue;} h1{color:white; text-align:center;} p{font-family:verdana; font-size:20px;} 무난했다. body tag에 배경색 칠하고, h1 ..