전체 글
[CSS] #3-1 레이아웃 1 : 레이아웃 이해하기
1. 프레임워크(Framework) 설거지를 떠올려보자. 우리가 열심히 수세미에 퐁퐁을 묻혀서 일일이 접시를 닦아도 괜찮다! 그런데 식기 세척기가 있는 가정에서는 식기 세척기가 설거지를 해준다. 이런 것들을 우리는 프레임 워크라 부른다. 미리 만들어져서 짜여져 있는 것들을 잘 쓰기 위해서이다. 자바에서는 이 프레임워크가 Spring, Mybatis 등이 있고, CSS에서는 Bootstrap 등이 있다. 그리고 이 프레임워크를 잘 적용하기 위해서는 레이아웃을 잘 나누는 것이 중요하다. 2. 레이아웃(Layout) 브라우저 화면 안에 박스 형태의 각 콘텐츠를 원하는 위치에 배치하는 것을 레이아웃이라 한다. 이 레이아웃은 수평, 수직, 그리드 방향으로 배치 할 수 있다. 아래의 사이트를 참조하며 함께 레이아웃..
[CSS] #2-3 Reset(리셋)
1. 리셋? 브라우저들은 기본적인 스타일을 가지고 있다. 그런데 이 브라우저들 마다 각각 다른 스타일을 가지고 있기 때문에 같은 css를 적용해도 Edge, Chrome, Firefox 등의 브라우저에서 사용자에게 비추어지는 모습이 모두 다를 수 있다. 이러한 문제를 해결하기 위해서 브라우저의 스타일을 모두 초기화해서 동일하게 만든 뒤 스타일을 추가해 나가 모든 브라우저에서 같은 화면을 볼 수 있게 해주는 것을 리셋이라 부른다. 이 리셋의 코드는 스스로도 정할 수 있지만 여러 사이트에서 리셋의 기본값을 만들고 공유하고 있다. 필자는 아래의 사이트를 참조하였다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset ..
[CSS] #2-2 고급 선별자 사용해보기
1. CSS의 고급 선별자 사용해보기 1) 특정 선별자에 스타일 주기 ① ' > ' ' , ' 이전 게시글에서 배웠듯 다양한 선별자의 관계를 활용해 CSS를 적용하는 기호가 있다. > : 부모>자식 요소로 선별자를 특정하여 스타일을 적용시킨다. , : '그리고(and)'라는 뜻이다. 예를 들어 h1, div 로 해두면 의 모든 요소와 의 모든 요소에 스타일을 적용하겠다는 뜻이다. ② 가상 클래스(태그의 상세 속성 접근) 말이 어렵다. 우리가 왜 선별자를 사용할까? CSS의 스타일을 적용할 때 특정 요소에만 손쉽게 적용하기 위해서일 것이다. 그래서 CSS는 굵직 굵직한 선별자들에 대한 접근도 가능하지만 상세적인 접근도 가능할 수 있게 하기 위한 선택자가 있다. - nth-child( ) 이 명령어는 몇 번..
[CSS] #2-1 다양한 선별자, 부모-자식 관계
1. 알아두면 좋을 선별자 선별자의 종류는 당연히 무궁무진하다. 그래서 당연히 필요한 것들은 그 때마다 찾아서 사용하는 것이 좋다. 하지만 주로 많이 사용하는 것들은 이 게시글에 남겨두려 한다. 아래의 사이트는 이런 선별자들의 종류들을 담고 있다. https://www.w3schools.com/cssref/css_selectors.asp CSS Selectors Reference W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and man..
[CSS] #1-3 External CSS
1. .CSS 파일 External Css는 스타일만 별도로 모아놓은 파일을 HTML 문서에 적용시키는 방식으로 스타일을 구현한다. 그래서 원하는 문서에 간편하게 스타일을 적용시킬 수 있다는 장점을 갖고 있다. 이 때 확장자명은 .html이 아니라 .css가 된다. 그래서 저장할 때부터 .css 확장자로 저장을 하여야 한다. 이 확장자는 파일 자체가 스타일을 나타내는 것이기 때문에 아래와 같이 스타일 태그를 입력하면 오류가 난다. 2. External CSS 사용법 1) 문자 코드 넣기 이 스타일 파일엔 한글을 사용하겠다는 코드를 우선적으로 입력한다. 꼭 입력해야하는 것은 아니지만 이 파일에는 다양한 주석도 한글로 들어갈 것이기 때문에 왠만하면 이 문서가 한글로 작성될 수 있도록 문자 코드를 입력해주는 ..
[CSS] #1-2 Internal CSS
1. Internal CSS 알아보기 Internal CSS는 내가 만든 스타일을 다른 곳에도 적용시키고 싶을 때 사용하는 방법이며 선택자를 사용한다. 태그를 사용해서 적용하며 HTML 문서에 여러번 올 수 있다, 단 태그 내부에 태그를 하나 더 만드는 것은 안된다. 주의할 점! 웹페이지는 html 문법도, CSS 문법도, Javascript 문법도 사용된다. CSS의 스타일을 적용한다고 다른 프로그램의 문법에 CSS문법을 사용하면 안되기 때문에 주의하자. 또 이 스타일 태그는 html의 head 안에 들어가있어야 한다. 1) 선택자 Selector - 스타일을 적용하기 위한 대상을 뜻하며, HTML 요소를 사용할 수도 있고 ID나 Class 형태로 정의할 수도 있다. - 선택자의 형태 : 선택자 {속성..