KPU CE

box-size #small{ border:10px; solid black; } #large{ border:30px; solid black; } 다음과 같이 박스를 만들면 다음과 같이 만들어진다. 박스의 크기가 다르다. 그 이유는 border의 px값이 large가 더 크기 때문이다. 그러면 px값에 상관없이 크기에 맞는 박스를 만들 수는 없을 까? * { box-sizing : border-box; } 참고로 *는 모든 태그를 뜻하는 것이다. box-sizing을 border-box로 하면 다음과 같이 px값에 상관없이 박스의 크기가 같아진다. box-sizing을 정해주지 않으면 content-box로 된다. content-box는 위의 첫번째 예제이다. position #box{ border : 5..

font-size PX REM 폰트 사이즈에서는 rem,em,px을 사용한다. rem rem은 html태그에 따라서 상대적으로 변하는 단위이다. 보통 rem을 사용합니다. px px은 사용자가 원하는 값이라고 정확히 선언하는 절대적인 값입니다. em em은 부모태그에 따라 상대적으로 크기가 바뀝니다. COLOR color는 16진수 방법, 직접 입력 방법, rgb표기 방법 이렇게 3가지 방법이 있습니다. Hello world 다음과 같이 h1{color:#00FF00;} 이렇게 하면 이진수에 맞는 색깔이 적용된다. h1{color:greenyellow;} 이렇게 직접 색상을 입력 할 수 있다. h1{color:rgb(0,256,256);} 이렇게 rgb값을 변화해가면서도 색상을 입력할 수 있다. Text..

조상 자손 선택자 ex) ul>li 이면 ul태그 밑에 li태그라는 의미이다. 예시를 코드로 보자. 수업자 명단 김용민 이석진 유현석 이혁주 수업표 자바 파이썬 CSS C++ 보기와 같이 ul 밑에 li만 빨간색으로 된 것을 볼 수 있다. 부모 자식 선택자 아이디 밑에 li만 선택한다. 수업자 명단 김용민 이석진 유현석 이혁주 수업표 자바 파이썬 CSS C++ 쉬는시간 없음 5분 10분 같은 ol이지만 아이디가 같은 ol의 li만 빨간색으로 변한다. 친구 선택자 수업자 명단 김용민 이석진 유현석 이혁주 수업표 자바 파이썬 CSS C++ 쉬는시간 없음 5분 10분 이러면 ol,ul태그 전부 빨간색으로 변한다.

태그 선택자 저번 시간에 한 것이 태그 선택자이다. 예제를 다시보자. hello world! hello world! h1태그를 선택자로 했다. 이러면 h1태그인것들이 전부 해당 색으로 바뀌게 된다. 아이디 선택자 hello world! hello world! 아이디 선택자는 앞에 #을 붙여서 만들어 준다. 첫번째 h1태그를 select로 해주었다. 그러면 실행결과를 보자. 위와 같이 아이디를 설정해준 태그만 색이 바뀐 것을 볼 수 있다. 클래스 선택자 클래스 선택자는 앞에 .을 붙여서 만들어 준다. hello world! hello world! id와 같은 결과가 나온다. 하지만 클래스를 쓰는 이유는 같이 것이 이 웹사이트에서 반복적으로 나온다면 아이디 선택자를 쓰면 안되고 클래스 선택자로 그룹핑을 해줘..

글씨 색깔 바꾸기 sytle 태크와 css에 color : 색상 를 이용해서 글씨에 색깔을 바꿀 수 있다. hello world! hello world! 위와 같이 sytle태그에서 지정해준것 과 같이 빨간색으로 바뀐것을 볼 수 있다. h1으로 묶어줬으니 h1태그인 것은 전부 빨간색으로 바뀌게 된다.