yunaaa's yunaaa's

전체 글

• Border

  카테고리 없음 2022. 12. 20. 19:48

  한 줄에 끝내기 - 굵기, 스타(실선 ,점선 등), 색 .p1 { border: 2px solid #4d9fff; } 명확하게 나누기 .p1 { border-style: dotted; border-color: red; border-width: 5px; } 다채로운테두리 .p1 { border-top: 3px dotted red; border-bottm: 2px dashed red; border-left: 5px solid green; }

  Read More
• OverFlow

  HTML&CSS/CSS 2022. 12. 20. 19:39

  내용물이 들어갈 공간이 부족한 경우가 있습니다. CSS Overflow 1. visible => visible 값을 사용하면 넘쳐나는 내용물이 그대로 보입니다. 따로 설정해주지 않으면 이게 기본값 2. hidden => 넘쳐나는 부분을 아예 숨겨줄 수 있다 3. scroll => 내용물을 숨겼다가, 사용자가 스크롤을 하면 볼 수 있게 해주는 방법 4. auto => scroll과 같은데 scroll은 항상 스크롤바를 보여주고, auto는 내용물이 넘쳐날 때만 스크롤바를 보여

  Read More
• width와 height

  HTML&CSS/CSS 2022. 12. 20. 19:28

  - CSS에서 height와 width 속성을 설정할 때 그 크기가 가르키는 부분은 내용(content) 부분만을 대상으로 한다 - HTML 요소의 전체 너비(width)를 계산하는 공식 width + left padding + right padding + left border + right border + left margin + right margin - HTML 요소의 전체 높이(height)를 계산하는 공식 height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

  Read More
• 박스모델(BoxModel)

  HTML&CSS/CSS 2022. 12. 20. 19:09

  1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다. 2. 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다. 3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리입니다. 4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다. # 패딩(Padding)을 비교해보자! 패딩 10일때 패딩 100일때 # 마진(margin)을 비교해보자! Lorem ipsum dolor sit amet, usu ea deleniti inimicus conceptam. Sit liber feugait consequuntur in, ea eruditi deseruisse per, in nam mali..

  Read More
• IP주소와 포트

  Computer Science/네트워크(Network Work) 2022. 12. 18. 20:48

  https://hanamon.kr/%eb%84%a4%ed%8a%b8%ec%9b%8c%ed%81%ac-%ea%b8%b0%eb%b3%b8-ip-%ec%a3%bc%ec%86%8c%ec%99%80-%ed%8f%ac%ed%8a%b8-port/

  Read More
• 프로토콜(Protocol),

  Computer Science/네트워크(Network Work) 2022. 12. 18. 20:44

  프로토콜 - 데이터를 송수신하기 위한 규칙 (예를 들어, 불어를 못하는 한국인과 한국어를 못하는 프랑스인이라면 '영어' 로 대화한다는 규칙을 정해서 대화할 수 있다. 이때! '영어 사용' 이 프로토콜이라 할 수 있다) OSI 모델 TCP/IP 모델 TCP/IP 모델 - IETF에서 제정 - OSI 모델 - 1970년대 후반, Open system interconnetcion 약자로써 ISO라는 국제 표준화 기구에서 만듬 - 등장 배경 1960~1970년대에는 같은 회사 컴퓨터끼리만 통신이 가능했다 (다른 회사와는 호환되지 않음) ISO가 데이터 통신의 규격과 프로토콜을 통일하려고 하였다. 하지만 통일화는 하지 못했다. - 통일화 하지 못한 이유 1) OSI 는 TCP/IP 모델이 완전히 자리잡은 후에 발..

  Read More
• URL구조

  Computer Science/네트워크(Network Work) 2022. 12. 18. 20:19

  URL이란?! - uniform resource locator의 줄임말로써, 웹이 존재하는 특정 데이터를 나타내는 문자열 URL구조 1.Scheme => 프로토콜(protocol) 부분을 가리킨다. 프로토콜이란 네트워크상에서 서버에게 데이터를 얻거나 전달할때(통신할때) 지켜야할 규약 2. Authority => 도메인(Domain Name)과 포트(Port)를 포함한다. 도메인네임이란 요청을 받는 단 하나의 서버를 지칭한다(IP address)와 같은 말이다. 포트(Port)란 요청받은 서버에서 자원(resource)에 접근할 수 있는 통로(Channel, gate)를 가리킨다. 대표적으로 HTTP는 80번 port, HTTPS는 443 port이다 3. 경로(Path) => 서버에 있는 데이터 중 원하..

  Read More
• Fetch함수

  JavaScript/Webdevelopment 2022. 12. 18. 14:00

  Fetch함수란?! - 서버에 request를 보내고 response를 받는 함수 홈페이지를 볼 수 있는 이유는?! - 웹브라우저가 해당 홈페이지 서버에 요청을 보내고, 서버가 보내준 응답을 해석했기 때문이다 - 웹 브라우저가 서버로부터 받은 응답의 내용으로 네이버 홈페이지에 필요한 HTML, JS등 이 코드들 - 이러한 코드들을 브라우저가 해석하여 우리가 보는 홈페이지를 만드는 것 fetch함수 해석 fetch('https://www.naver.com') .then((response) => response.text()) .then((result) => { console.log(result);}); 1. fetch('https://www.naver.com') - fecth함수가 받는 인자, url로 요청..

  Read More