코딩 공부12 css _ box 모델 활용 웹 페이지를 구성할 때 선을 이용해 공간을 구분하기도 하는데 그때 우리는 box 모델을 활용할 수 있다. 오늘은 그 box모델에 대해 공부하도록 하겠다. box는 사면이 막혀 있으므로 공간을 구성할 때 주로 아래만 라인이 있기를 원한다. 그때는 border-bottom 이라는 코딩을 사용하면 된다 예를 들면 h1{ border: 1px solid gray;} 이렇게 하면 사면이 막히니 h1 { border-bottom: 1px solid gray;} 이렇게 하면 된다. 문제에 항상 가까이 가기 위해서는 마우스 오늘 쪽을 눌러서 개발자 모드로 들어간다. 그리고 원하는 부분을 클릭해서 원리를 이해하는 것이 가장 중요하다. 원하는 그림이 나오지 않을 경우 개발자 모드에서 찾아보면 대부분 마진 값과 패딩 값이 .. 2020. 7. 8. css 박스 모델 tag와 tag의 차이점은 무엇일까? tag는 화면 전체를 쓰고 tag는 자기 크기만큼만 쓴다는 것이다. 그리고 이를 html에 표시할 때 화면 전체라는 의미로 block level element 자기 크기만큼의 의미 inline element 라고 한다. 이를 html로 표시하자면 이런식으로 표시할 수 있다. 하지만 보시다시피 중복이 너무 많고 지저분함으로 정리를 하자면 css 내용이 중복될 경우 , 콤마를 활용해서 옆에 같이 넣어주고 border라는 말도 겹치므로 한 번만 넣어준다. 만약 box의여백을 주고 싶다면 콘텐츠의 테두리 사이 간격을 넣고 싶다면? pedding라는 코딩을 넣어 원하는 간격만큼 넣어주면 된다 예를 들면 pedding:20px 만약 두 박스 모델 사이에 간격을 넣고 싶다면 ma.. 2020. 7. 7. CSS - 선택자 CSS 선택자 지난번에 CSS를 이용하는 TAG를 사용할 때 selector선택자라는 것을 배웠습니다. 그 선택자에 대해 자세히 공부하도록 하겠습니다. 웹브라우저에 보이는 어떤 카테고리를 같은 그룹으로 묶고 싶다면 class로 묶어 줍니다. 예를 들면 한번 봤던 카테고리를 표시하고 싶다면 class="saw" 그리고 이렇게 스타일 테그로 만들면 됩니다. 그냥 saw 라고 하지 않고 . saw라고 하는 이유는 그 의미가 클래스값이 saw인 경우라는 뜻 입니다. 예로 스타일 태그 안에 tag, class, Id선택자가 있습니다. 여기서 영향력이 가장 큰 것은 id > class > tag 나눌 수 있습니다. 그렇기 때문에 tag에 블랙을 지정하고 id선택자를 레드로 지정할 경우 id 선택자의 영향력이 큼으로.. 2020. 7. 4. css에 대해서 오늘은 css에 대해서 다시 한번 공부하겠습니다. html에 css를 적용하는 방식인 2가지로 구분됩니다. 첫째 CSS tag를 이용하는 방식과 둘째 속성을 이용하는 방식 자 여기서 CSS tag를 이용하는 방식에 대해 자세히 알아보겠습니다. 이것은 CSS Tag를 이용하는 방식이다 이는 크게 방식으로 표현될 수 있다. 여기서 a는 선택자 selector color는 property red는 value 그리고 property 와 value를 합한 color:red;를 declaration이라고 한다. 이 용어를 잘 알아둬야 구글링을 할 때 원하는 코딩을 잘 찾을 수 잇다. 예를 들어 내가 원하는 웹브라우저에 글씨를 크게 하고 싶은데 어떻게 하는지 모른다면 구글링으로 CSS Font Size라고 쳐 보면 .. 2020. 7. 3. 이전 1 2 3 다음
