WEB9 웹 문서의 레이아웃 만들기 배치 방법을 결정하는 display 속성 종류 설명 block 인라인 레벨 요소를 블록 레벨 요소로 바꿈 (여러 줄->한 줄) inline 블록 레벨 요소를 인라인 레벨 요소로 바꿈 inline-block 인라인과 블록 레벨 요소의 속성을 모두 가지고 마진과 패딩을 지정할 수 있다. none 해당 요소를 화면에 표시하지 않는다 menu1 menu2 menu3 menu4 li를 display : inline-block으로 지정하여 가로 배치를 해준다. * display: inline-block과 float: left 속성의 차이점 display: inline-block은 기본 패딩과 마진 값을 가지고 있지만 float: left는 기본 패딩과 마진을 가지고 있지 않아서 필요에 따라 지정해야 되고 float.. 2024. 2. 22. CSS와 박스 모델 블록 레벨 요소 혼자 한 줄을 차지하는 것이다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 뜻이다. 따라서 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. ex) div, span, p 인라인 레벨 요소 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. 즉 한 줄에 인라인 레벨 요소를 어러 개 표시할 수 있다. ex) span, img, strong 박스 모델의 기본 구성 콘텐츠 영역(contend) 패팅 영역(padding) : 콘텍츠 영역과 테두리 영역 사이의 여백 테두리(border) : 박스의 테두리 마진(margin) : 박스 모델 사이의 여백 * 마진과 패팅은 상하좌우 여백을 조정할 수 있다. 사진 첨부 padding 테두리와 콘텐츠 영역간의 .. 2024. 2. 22. [JS] 연산자 JS에서 사용되는 연산자들을 알아보자 증감 연산자 증가 ++ 변숫값을 1만큼 증가 감소 -- 변숫값을 1만큼 감소 var a = 10; var b = a++ + 5; // b=15 var c = 10; var d = ++c + 5; // d=16 증감 연산자는 피연산자(a) 뒤에 있을 때 전체 수식의 처리가 끝난 다음 적용된다. 피연산자(c) 앞에 있을 때는 전체 수식을 처리하기 전에 적용된다. 문자형과 숫자형 연산 이해하기 var numVar = 100; var strVar = "50"; numVar+strVar "10050" 100과 50을 더하니 둘을 연결한 문자 10050이 나온다 즉 + 기호는 연결 연산자다 numVar - strVar 50 ' - '기호는 산술 연산자다 따라서 js에서는 숫자형.. 2024. 1. 3. [JS] 입력과 출력 12월 초에.. 서울페이로 드디어 JS 입문서 책을 샀다 이번 겨울방학에 JS공부를 하기로 마음 먹었으니 이 책을 참고로해 시작해볼까 한다!! 부디 작심삼일이 아니길 ... 1일차인 오늘은 아직 아무것도 모르는 새싹이라(?).. 화면에 입출력 정도 해보았다. Java Script란 무엇일까? HTML은 웹의 뼈대를 만들어주고 CSS는 눈에보이는 외관만 담당한다. 그치만 JS는 웹의 동적인 부분을 만들어줄 수 있다. 그럼 JS에 대해서 좀 더 자세히 알아보도록 하자! Java cript의 특징 웹 사이트를 동적으로 만들 수 있다. 웹 브라우저에서 실행되는 프로그램을 만들 수 있다. 서버를 구성하고 서버용 프로그램을 만들 수 있다. 모든 웹 브라우저에서 작동한다 웹 브라우저에서 실행결과를 즉시 확인할 수 있.. 2023. 12. 29. 이전 1 2 3 다음
