CSS
-
지정된 html파일 에만 css 주는 방법! 웹 공부 ! 2018. 4. 3. 18:37
홈페이지를 만들다 보면 index.html에는 style을 넣어야 하고 다른 html에는 넣으면 안되는 경우가 있다. 그럴땐 class나 id값을 주면 되지만 html에 직접적으로 줘야 할 경우엔 다른 css를 만드는 방법 밖에 떠오르지 않을거다. 하지만 javascript 와 jquery 코드 몇줄이면 다른 css 파일을 만들지 않아도 된다. var a =location.href; // 파일을 찾아라 var b = a.split("/"); //파일을 찾아서 / 마다 나눠서 배열로 만들어라 //console.log(b); //콘솔로 확인 해서 html파일의 위치를 확인 if(aa[4] == 'index.html'){ //만약 b의 배열 중 4번째가 index.html 과 같다면 $('html').css(..
-
가로정렬(가운데 정렬)! 웹 공부 ! 2018. 3. 7. 15:26
html & css을 하다보면 가로 정렬에 애를 먹는 경우가 종종 있다. text-align: center 속성을 넣어도 적용이 되지 않고 margin:0 auto를 넣어도 적용이 안되는 경우가 종종 있다. 그럴 경우 사용하는 ! TIP ! html 파일의 div를 가운데 정렬을 한다면 . cssdiv{ width: 100px; 넓이값 position: relative;/ position: absolute; 속성을 3차원으로 바꾸는 작업을 해야 한다. left: 50%; 왼쪽으로 50% 이동 margin-left: -50px; 넓이의 절반을 다시 오른쪽으로 이동} 이런 방식으로 하면 좀 더 편하게 가운데 정렬을 할 수 있다.
-
style 우선순위! 웹 공부 ! 2018. 3. 6. 14:26
style을 주는 방식은 3가지 방식이다. 1. inline 속성으로 주는 방식 직접적으로 style을 주는 방식 2. 태그로 주는 방식 3. css 파일로 주는 방식 body{ background: #000} 이 3가지 방식 중에 html 파일은 inline > 태그 > css파일 순서로 우선순위를 둔다. 그 이유는 inline속성은 직접적으로 style을 주고 있기 떄문에 html파일에서 우선순위가 제일 위에 있다. 그 다음인 태그의 경우에는 직접적으로 style을 주는 것은 아니지만 같은 파일 안에 style을 주기 때문에 css파일 보다 우선순위를 두고 있다고 할 수 있다. 하지만, * html-5에서는 주로 css파일을 링크 해서 주는 방식을 선호 한다.
-
시멘틱 마크업! 웹 공부 ! 2018. 3. 2. 16:12
시멘틱 마크업 이란? 쉬운 의미로 html-5를 의미한다. 또한 시멘틱 마크업은 최대한 가벼워야 한다. 즉 인라인 스타일 태그 형식 보다는 css파일에 스타리 정보를 제공 하는것이 시멘틱 마크업을 충족 할 수있다. 다시 말해 불필요한 코드는 제거 되어야 하고 파일 크기는 최소한으로 해야 한다. ** 2005년 Andy Clark의 시멘틱 마크업에 대한 글을 인용 1. html을 정확하고 접근이 용이한 데이터 구조를 형성 2. css는 스타일 정보를 제공 3. 스크립트는 제작하는 사이트에 많은 기능과 유용성을 크게 해주는 스크립트를 제공
-
웹 사이트의 기본 구성! 웹 공부 ! 2018. 2. 26. 14:27
웹 사이트는 HTML, CSS, jQuery & Javascript 로 구성되어 있다. 1. HTML HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)라는 의미의 웹 페이지를 위한 지배적인 마크업 언어다. - 위키백과 - 쉽게 설명하면 html 이란 웹 사이트에 대한 기본적인 정보를 담는 장소 라고 할 수 있다. 2. CSS 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로[1], HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. - 위키백과 - css를 쉽..