오뚝이개발자

style 태그 안에서 디자인을 일부 수정한다면 모든 html 태그에 대해 그것들을 동일하게 수정해주어야 한다면 매우 비효율적일 것이다. html 파일이 수천 수만개가 된다고 생각해보아라. 이럴 때 해결책으로 CSS코드를 재사용하는 방법이 있다. 먼저 원하는 기존에 작성해둔 html코드 안의 style 태그 안의 내용을 복사하여 style.css라는 파일에 붙여넣기 한다. 그 후 link 태그를 이용하여 모든 html 파일들에게 style.css라는 파일의 디자인 양식을 사용하라고 명령을 해주면 된다. 코드로 살펴보면 아래와 같이 된다. a { color:orange; text-decoration: none; } h1 { font-size: 45px; text-align: center; border-bo..

창의 크기에 따라 디자인 옵션을 다르게 주는 것을 반응형 웹이라 한다. PC에서 보는 화면과 태블릿, 모바일에서 보는 화면이 다르게 만드는 것이다. 이러한 기능은 미디어 쿼리를 사용해 구현이 가능하다. 예컨대, 다음과 같은 html 코드가 있다고 해보자. Responsive 이 때 창의 크기를 800px을 기준으로 그보다 작을 때만 Responsive라는 글자가 나오게 하고싶다면 아래와 같이 media 쿼리를 추가해주면 된다. Responsive 여기서 min-width:800px은 screen width>800px과 같은 뜻이다. "screen width가 800px보다 크면"이라는 말은 최소 800이라는 말과 동일하기 때문이다. 반대로, max-width:800px은 screen width

위 사진에서 CSS에 대해 설명하는 글을 우측의 공간에 넣으려면 어떻게 해야 할까? 이럴 때 사용하는 것이 바로 grid라는 CSS의 최신기술이다. div, span 태그 웹을 만들다보면 디자인을 위해 의미없는 태그를 사용해야 하는 때가 있다. 이 때 사용하는 것이 와 이라는 태그이다. 는 block level element, 은 inline element이다. NAVIGATION ARTICLE NAVIGATION ARTICLE 그리드(grid) NAVIGATION ARTICLE 위와 같이 div를 div 부모 태그로 한 번 더 감싸주고, grid라는 id를 준다. 그 후, display 속성을 grid로 선택한 뒤 grid-template을 선택해주면 된다. 여기서 grid-template은 어떻게 배..

테두리, 구분선 넣기 1. 테두리 넣기 h1 { font-size: 45px; text-align: center; border:1px solid gray; margin:0px; padding:20px; } 위와 같은 style 옵션을 style 태그 안에 넣어주면 아래 그림과 같은 결과를 볼 수 있다. border는 테두리를 지정해주는 속성이다. 그림에서 보듯이 WEB에 테두리가 생겼다. 2. 구분선 넣기 border를 조금 수정하여 테두리가 아닌 구분선으로 넣을 수도 있다. h1 { font-size: 45px; text-align: center; border-bottom:1px solid gray; margin:0px; padding:20px; } border-bottom으로 한 결과 위의 사진처럼 ..

박스 모델 CSSCascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.[2] CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.[3] This separation can improve content acces..

글씨크기, 정렬 style태그 안에 아래와 같은 코드를 추가해보자. h1 { font-size: 45px; text-align: center; } 위 코드는 h1태그가 사용된 곳의 글씨크기를 45px로 바꾸고, 가운데 정렬을 시행한다. class 선택자 HTML CSS 위와 같이 코드를 수정한 뒤, style 태그 안에 아래와 같은 내용을 추가해준다. .saw { color:gray; } 그러면 saw라고 명명한 class들만 gray로 색상을 바꾸어준다. 이러한 것을 class 선택자라 하고 style 태그 안에선 위와 같이 style 옵션을 준다. class는 여러 개일수도 있고, 이들은 공백으로 구분한다. 아래와 같은 경우도 가능하다는 것이다. CSS id 선택자 CSS 위와 같이 id를 추가해보자..

style 태그 - 해당 태그 안에 있는 내용은 CSS 문법으로 해석하라고 알려주는 태그 - CSS는 세미콜론으로 행 구분 - style태그의 위치는 head태그 안에 써준다. - style태그를 사용하면 특정 태그가 등장하는 모든 곳에 동일한 디자인 옵션을 주어 번거롭게 바꾸지 않아도 된다. - 장점 : 유지보수 용이, 코드에서 HTML정보와 디자인 부분 분리(가독성 향상) HTML에서 포스팅한 실습 코드 중 index.html에 아래와 같이 style태그를 삽입하면 된다. 위의 사진에서 a태그가 달린 부분들이 모두 주황색으로 디자인이 바뀐 것을 볼 수 있다. style 속성 style태그 대신 style 속성을 쓰면 HTML 태그 안에 디자인 옵션을 줄 수 있다. 이렇게 하면 해당 태그가 등장하는 모..

HELLO WORLD 출력 VScode로 test.html이란 파일을 만들고 hello world를 입력한 후 저장한다. 크롬을 열어 ctrl+o를 누르고 test.html 파일을 선택하면 아래 그림과 같이 해당 html파일이 크롬으로 열리는 것을 볼 수있다. , 태크 - html에서 태그란 그 안의 내용을 설명해주는 것을 말한다. - strong 태그는 태그 안의 내용을 Bold체로 바꿔준다. - EX) hello world - u 태그는 태그 안의 내용에 밑줄을 쳐준다.(underline) - EX) hello world Heading 태그 heading 태그란 제목을 표현하는 태그를 말한다. , , ... , 까지 6가지가 있다. 숫자가 작을수록 크기가 큰 제목이다. heading 1 heading..