Web/CSS14

• 

  CSS Layout(float, overflow) 실습 TOP ALL Area (width:100% , height:100px) Aside english korea japen Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti asperiores cupiditate eligendi aliquid repudiandae ad, ullam, quam dolorum quisquam rerum non cum molestias. Obcaecati neque animi ex quibusdam cupiditate sed. thank you :) copyright header{ text-align:center; width:100%; height:100px; background-color: green; } .l.. Web/CSS 2019. 6. 13.

• [css] 미디어 쿼리, @media, 조건문? 화면에 크기에 따라서 디자인을 다르게 하는 것을 미디어 쿼리라고 한다. 화면의 크기가 800px 보다 크냐 작으냐에 따라서 div 태그를 보이게 안보이게 하고 싶다고하면 우선 화면의 크기가 얼마인지 알아야 한다. 개발자도구에 들어가서 검사를 해보면 화면의 크기가 표시가 된다. 사용법은 아래와 같다. @media(min-width:800px){ 최소 화면이 800px 보다 크다면 display를 보이게하지마라(none)div{display:none;}} @media(max-width:800px){ 최대 화면이 800px 보다 크다면 display를 보이게하지마라(none)div{display:none;}} 여러 개의 화면이 존재하는 세상에서 미디어쿼리는 가장 중요한 역할을 한다. @media(max-wid.. Web/CSS 2019. 1. 31.

• 

  [css] 그리드(grid), div, span grid WEB HTML CSS JavaScript CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in .. Web/CSS 2019. 1. 29.

• 

  [css] 박스 모델, 중복의 제거, display:inline, block 중복의 제거 border-width:5px;border-color:red;border-style:solid; 위 3개의 코드를 한 줄로 줄일 수 있다.아래처럼 border:5px solid red 순서는 중요하지 않다. display:block, inline 태그는 block level element이다.한마디로 화면 전체를 사용한다는 뜻이다. 태그는 inline element이다.화면 전체를 사용하지않고, inline 형식으로 사용된다. 하지만 여기서 display 라는 옵션을 사용해주면 태그를 inline으로도 변경할 수 있고,반대로 태그를 block으로 변경할 수도 있다. 사용법은 display:block; // inline 의 태그인 태그를 display를 사용하여 block 으로 변경하면 전체화.. Web/CSS 2019. 1. 29.

• [css] HTML 과 CSS 구분 1. HTML 코드작성 중이던 폴더 안에 assets 라는 폴더 생성 2. reset.css 파일 생성 후 초기화해주는 코드들을 넣어주고 저장 3. layout.css HTML 의 레이아웃을 담당하고 있는 부분들을 안에다가 저장 4. common.css 공용으로 사용되는 ex) clearfix 와 같은 코드를 안에다가 정리 5. navigation.css nav 로 작동되는 것들을 안에다가 넣어서 보기좋게 정리 6. .css 파일 생성 후 @charset "UTF-8"; 해주고 아래에 코드를 입력하면 된다. 7. .css 파일을 꺼내 사용할 때 로 사용* ./assets 란 본인폴더에서 /assets 폴더로 이동하라는 뜻 8. 주석을 통해서 HTML 코드를 div 별로 나눠서 주석처리하고 분단을 접어서 관리 Web/CSS 2019. 1. 23.

• [css] 서브메뉴 만들기 #nav{ z-index: 200; /*뎁스 depth값을 설정*/ position: relative; /**/} .navigation_list{ float: left; // 아래로 정렬되던 것을 아래 ex) 와 같이 옆으로 출력 width: 142px; // 네비게이션 간의 길의 조절 ex) 메뉴1 메뉴2 메뉴3 메뉴4 line-height: 40px; /* 텍스트를 상하로 가운데 정렬하는 속성*/ text-align: center; /* 가운데 정렬 */}.navigation_link{ font-size: 16px; // 메뉴1 메뉴2 메뉴3 의 크기를 조절 color: #00ab33; // 색상을 조절} .sub_menu{ width: 100%; // 서브메뉴 나올것의 길이 height: 100px.. Web/CSS 2019. 1. 23.

• [css] clearfix, 텍스트 위아래로 가운데 정렬, 가운데 정렬, 선 긋기 clearfix 사용하고자 하는 div 에다가 class="clearfix" 를 추가해주어야 한다. 그리고나서 style 태그 안에서 clearfix 를 설정해주어야 한다. .clearfix{overflow: auto;} .clearfix::after{clear: both;display: block;content: "";} 설정을 해주고나서 우리는 네비게이션이ex)이름나이성별 로 출력하고 싶은게 아닌ex)이름 나이 성별 로 출력하고 싶기 때문에 해당 nav 에서 float을 추가해줘야 한다. jcode/index.html 에서는 .navigation_list 로 되어 있기 때문에 추가를 하면 .navigation_list{ float: left; width: 142px; line-height: 40px;.. Web/CSS 2019. 1. 23.

• 

  [css] 배경처리 후 글자 위치 조정 #header{ background: #eee; height: 100px; /*width: 1000px; margin: 0 auto 20px auto; /* 시계방향으로 돈다 상 우 하 좌*/ margin-bottom: 20px;}.header_inner{ width: 1000px; margin: 0 auto; background: #fff;}#nav{ height: 50px; background: #eee; /*width: 1000px; margin: 0 auto;*/ 1000px 에 가운데 정렬되어있는 회색 바탕색을 주석처리하여 끝까지 보냄 margin-bottom: 20px; }.nav_inner{ width: 1000px; margin: 0 auto; background: #fff;} header.. Web/CSS 2019. 1. 22.

• 

  [css] 간단한 레이아웃 만들기 아래 코드를 보면 class 로 이름지정하는 것과 id로 이름 지정하는것으로 나뉘는 것을 볼 수 있다. 으로 나눠지는 것들은 css 에서 # 으로 꺼내와서 사용 할 수 있고, 로 나눠지는 것들은 css 에서 . 으로 꺼내와서 사용 할 수 있다. 왜 나눈지 이유는 잘 모르겠다. header nav // clearfix를 추가해줘야된다. session article aside footer 목표 결과물 Web/CSS 2019. 1. 22.

• 

  [CSS] <link rel="stylesheet" type="text/css" href="style.css"> header { border-bottom:1px solid gray; padding:20px;}nav { border-right:1px solid gray; width:200px; height:600px; float:left;}nav ol{ list-style:none;}article{ float: left; padding:20px;}h2{ font-size:50px;}style.css 초록색 부분 내용이 link 태그를 사용하게 되면 호출된다. JavaScript JavaScript란? 변수와 상수 연산자 연산자계산을 할 때 사용되는 것입니다.page_op.html 위 사진과 같이 style.css 파일의 내용이 HTML 에서 link로 부르게되면똑같은 형식이 적용된다. Web/CSS 2018. 3. 3.

• 

  [CSS] <img src=" " /> img{float:left;} float:left; 를 사용 안했을 시 hello 라는 문구가 위에 빈 공간을 남기고 붙어있는데float:left; 사용할 시 아래와 같이 바로 옆에 붙는다. img { float:left; } Web/CSS 2018. 3. 3.

• 

  [CSS] <li id="selected"> #selected{} {padding:30px;} {margin:50px} HTML css javascript css 라는 항목만 변경하고 싶을 때 li id="selected" 로 id를 만들어준다. 안에 #selected 를 입력해서 id를 호출한 뒤 내용을 입력해주면된다. {padding:30px;} , {margin:50px} Web/CSS 2018. 3. 3.