본문 바로가기

분류 전체보기

 (346)
css의 이해- 중복의 제거 새로운 파일 style.css를 추가하고 기존 html 파일의 란에 위와같은 링크를 추가하면 stlye.css의 하나의 파일에 같은 을 쓰는 html 파일들과 쉽게 연결시킬 수 있다.
css의 이해-반응형디자인 1.mediaquery와 @media의 해석 mediaquery란 어떠한 조건을 갖추었을때만 작동하도록하는 css이다 @media(max or min -width:600px){ #pw{display:block;} } 해석:화면의 너비가 600px보다 작을때 혹은 클때 #pw의 화면의 속성을 block으로 하라는 의미 이다 *문제발생 실습과정중 아무리 수정을 해도 mediaquery가 chrome에서는 작동하지 않았고 혹시나 하여 익스플로러로 열어보니 익스플로러에서만 작동하였다. *해결 구글링을 통하여 안에 를 추가해야한다는 것을 알게되어 실행하니 정상적으로 작동하였다.
css의 이해-grid 1., tag ★ tag는 ★이 block 속성을 가지게 하는 tag 이며 ★ tag는 ★이 inline 속성을 가지게 하는 tag이다. 2. display:grid gird방식은 하나의 부모 div 안에 있는 자식 div를 묶는 것으로 위 방식은 grid-template-columns 방식으로 기억할 것 이를 표현하는 값으로 fr을 쓰는데 fr이란 비율을 나타내며 예를 들어 grid-template-columns : 2fr 1fr; 이란 2:1의 비율을 나타낸다 ※최신동향 html css등을 확인할 수 있는 사이트 https://caniuse.com/#home
css의 이해- box model 1. border(테두리) html의 tag는 기본적인 성격에 따라 border가 화면전체를 쓰기도 하고 자신의 content 만큼의 크기만큼을 쓰기도 한다 ex). h1=화면 전체 크기 a=자기 자신 크기 이때 화면전체의 테두리를 쓰는 tag : block level element 자신의 content만큼의 테두리를 쓰는 tag : inline element 라고하며 display:blcok or inline 의 입력으로 그 성격을 바꿀수 있다. 2. box model css의 의미 ●padding: x px; 은 텍스트와 테두리 사이의 간격 ●margin: x px;은 테두리와 그 바깥 공간과의 간격 ●width:x px;은 테두리 자체의 너비 ●height:x px:은 테두리 자체의 높이
css의 이해-selector 1. css selector인 class의 해석과 응용 예제1의 경우 ● HTML를 해석하자면 a tag를 saw 라는 그룹(class)로 묶는다 라는 뜻이고 ● 를 해석하자면 saw라는 class로 묶인 모든 tag에 대하여 color를 blue로 한다 라는 뜻이다. 또한 HTML 와 같이 하나의 tag에 2개 이상의 class이름을 지정할 수 있고 구별은 띄어쓰기로 표현한다 2. css selector의 우선순위 같은 그룹의 경우는 마지막 즉 가장 최신의 것이 우선순위를 가지며 다른 그룹의 경우는 id>class>element(직접 tag를 지정하는 경우 예제1의 a{} selector) 순서의 우선순위를 가진다 3. selector의 응용 예제2의 #pw ol 로 작성된 selector는 id가 p..
css의 이해 1. css란 html의 디자인적 tag를 이용하는 것보다 디자인에 특화된 새로운 언어를 만드는 것이 효율적이고 따라서 그 언어가 바로 css인 것 2. css의 해석 예제 1의 경우 사용자는 Web browser에게 html의 언어로 "style tag 안에 있는 것은 css니까, 너는 그 안에 있는 내용을 a라는 tag에 css의 문법에 맞게 해석하고 적용시켜야 해"라고 말하는 것이다. 이경우 a는 css의 효과를 누구에게 줄 것인지 선택한다는 의미에서 selector(선택자)라고 부르며 그 selector에게 지정될 효과(color=red;)를 declaration(선언,효과)이라고 한다. 예제 2의 경우 body tag 안의 2번째 list tag에 있는 ★="☆"은 html의 속성을 의미하는 것..
참조 1. 댓글서비스 추천사이트 - https://disqus.com/ 참조 - https://opentutorials.org/course/3084/18594 2. 채팅서비스 추천사이트 - https://www.tawk.to/ 참조 - https://opentutorials.org/course/3084/18597 3. 방문자 분석기 추천사이트 - https://analytics.google.com 참조 - https://opentutorials.org/course/3084/18899
웹브라우져와 웹서버의 이해 1. 기본적인 웹 상호작용의 원리웹을 배포하는 것에 있어서 기본적으로는 2대의 컴퓨터가 필요하며1대는 Web browser(Wb) 또다른 1대는 Web server(Ws)의 역할을 한다예로 Wb가 Ws에 index.html 이라는 파일을 request하면 Ws는 내부에 있는 index.html의 파일을 읽어와 다시 Wb에게 읽어온 위 파일을 response 한다여기서 Wb는 Client라 부르며 Ws는 Server라 한다 2. 웹호스팅의 원리(*기본적으로 개인컴퓨터는 Web browser인 client이고 Web server를 가지고 있지 않다.) 나의 컴퓨터에 있는 index.html 파일은 내 컴퓨터가 Ws가 아니기 떄문에 또 다른 Wb인 컴퓨터가 정보를 request 할 수 없다따라서 내 컴퓨터의 ..

티스토리툴바