CSS16 [WEB/CSS] 그리드(Grid) 사용하기 우선 그리드 개념을 이해하기 위해 아래 코드를 입력하고 결과를 확인한다. NAVIGATION ACTICLE 그리드를 사용하기 위해서는 style 태그안에 있는 #grid에 코드를 추가해야한다. 위 코드의 grid-template-columns: 150px 1fr의 의미는 첫번째 컬럼인 NAVIGATION은 150px의 공간을 가지고 두번째 컬럼인 ACTICLE은 150px을 제외한 나머지 공간을 가진다는 의미이다. 그래서 결과를 보게 되면 잘 나온 것을 확인할 수있다. 만약 grid-template-columns: 2fr 1fr이라면 첫번째 컬럼인 NAVIGATION은 2fr과 1fr을 합친 3fr 중 2fr의 비율(2/3fr)을 갖는다라고 생각하면 된다. 두번째 컬럼인 ACTICLE은 2fr과 1fr을.. 2022. 7. 3. [WEB/CSS] 박스 모델 이해하기 box.html이라는 새로운 파일을 만들고 그 곳에 아래와 같은 코드를 입력하였다. 결과는 h1태그를 사용했기 때문에 CSS가 제목으로 나타났고 a태그를 사용했기때문에 링크가 걸린 것을 확인할 수 있다. 그렇다면 이런 궁금증이 생길 수 있다. h1태그는 왜 자동으로 줄바꿈이 이루어지는가? a태그는 왜 h1과 달리 줄바꿈이 이루어지지 않고 사용이 되는가? 이때 나타나는 개념이 박스 모델이다. h1과 같은 태그는 화면전체를 사용하는 태그로써 block level element이라고도 불린다. a와 같은 태그는 글자 자기구역만을 사용하는 태그로써 inline level element라고 불린다. 그렇다면 block level element와 inline level element을 확인해 보기 위해 영역을 눈에.. 2022. 7. 1. [WEB/CSS] 정렬, 폰트 크기 조절하기 현재까지 만든 웹페이지를 보면 h1 태그로 묶인 WEB의 크기가 더 컸으면 좋겠다는 생각을 한다. CSS로 글자의 크기를 조절하기 위해서는 h1만 수정할 것이기 때문에 style 태그 안에서 h1{}을 작성해준다. 글자 크기를 설정하는 속성은 font-size이다. font-size 작성 후 그 뒤에 자신이 원하는 크기를 넣어주면 된다. 글자 크기를 50픽셀로 주게되었을 때를 확인해 보면 확실히 더 커진 것을 확인 할 수 있다. *아래 예시는 픽셀 값을 자유롭게 지정할 수 있다는 것을 보여준다. 다시 한 번 내가 만든 웹페이지를 보면 다 왼쪽으로 치우쳐져 있는 것을 확인 할 수 있다. 저 WEB을 가운데 정렬하기 위해서는 style 태그에서 h1 영역에 text-ailgn: center; 속성을 추가하면.. 2022. 6. 30. [WEB/CSS] 글자 색 바꾸기, 밑줄 없애기 현재 HTML로 짜여져 있는 코드는 CSS 언어와 다르기때문에 CSS 언어의 코드를 입력하기 위해서는 style 태그를 사용해야 한다. style 태그 안에 위치한 내용은 CSS언어로 처리하겠다는 의미이다. 만약 링크의 색을 다른 색으로 바꾸고 싶다면 4개의 a태그를 하나씩 바꿔도 되지만 CSS는 한 번에 색 변경을 처리해 준다. *CSS는 style 태그 안에서 이루어져야한다. a 태그를 가지는 모든 코드의 색을 빨간색으로 바꾸겠다는 의미이다. 새로고침하여 확인해보면 잘 수정된 것을 볼 수 있다. 만약, CSS만 다른 색으로 바꾸고 싶다면 HTML 코드에서 style를 작성하면 된다. 현재 HTML 코드의 a태그 안에 style = "color: black" 작성을 하고 새로고침을 하면 CSS만 검은색.. 2022. 6. 29. 이전 1 2 3 4 다음
