WEB39 05-01. css3 테두리와 투명도 border-width: 1px; 여기서 px 단위로 많이 사용 하는 이유는 얇고 웬만해선 규격이 바뀌지 않아 많이 사용한다고 한다. box-sizing: border-box 좌우의 테두리로 요소의 크기가 결정된다. (내부공간이 줄어든다.) opacity: 0.6(범위) 투명도와 불투명도 범위는 0~1이며 1에 가까울 수록 불투명해진다. 만약에 배경만 투명하게 할려면 background-color: rgba(255.255.255.0.2) 형식처럼 쓰면 되고 내부에 있는 글처럼 모두를 투명하게 할경우 back-ground: blue; 를 쓴후 아래에 opacity:0.2 로 쓰면 된다. 2022. 12. 26. [HTML5] placehorder 와 required 속성 에 대해 알아보자 placehorder 속성 아이디나 패스워드를 입력하려고 보면 흐릿한 글씨로 "입력하세요"로 나와 있는 경우가 있습니다. 이때 사용하는것이 placehorder 입니다. form 형식에서 placehorder="아이디를 입력하세요" 을 사용했을 경우 사용자가 뭔가를 입력 하기 전까지 입력이라는 글이 나오게 됩니다. required 속성 회원 가입시 사용자의 이름 비밀번호등을 입력 받는데 이는 꼭 입력해야 합니다. 이를 required 속성을 이용해서 빈칸이 되는것을 방지할수 있습니다. 또한 required 는 조건에 맞지 않으면 제출이 안되게 할수도 있습니다. 예시로 나이가 18세 이상 60세 미만 일 경우만 작성하게 하고 이보다 작거나 클경우는 입력이 막히게 됩니다. 나이: 2022. 12. 22. [HTML5] Emmet 으로 작업흐름을 개선해보자 Emmet이란 HTML 과 CSS를 빠르고 효율적으로 작성하기위해 코드를 단축시켜 특정 단축키를 통해 확장하여 완전한 코드로 변환시켜주는 것 입니다. 아래에서 예시들 몇개를 보겠습니다. Child: > 부모와 자식 요소간의 관계를 나타냅니다. nav>ul>li 입력 후 Tab 또는 enter를 누르게 되면 로 바뀌게 되는것을 알 수 있습니다. Multiplication: * 요소를 반복하는데 사용합니다. ul>li*5 입력 후 Tab 또는 enter를 누르게 되면 * 옆에 숫자수 만큼 list가 만들어지는 것을 알 수 있습니다. Sibling: + 형제요소를 나타냅니다. div+p+bq 입력 후 Tab 또는 enter를 누르게 되면 div+p+bq 가 되는것을 알수 있습니다. TIP) 더 많은예시들은 아.. 2022. 12. 20. 04-01. 레이아웃 1.수평정렬 레이아웃 ①자손에게 float 속성을 부모에겐 overflow: hidden 키워드를 사용한다. width 속성과 height 속성을 입력 안해도 overflow 속성이 자손이 차지하는 너비를 모두 감싸는 특징이 있다. 오늘의 메뉴 메뉴 - 1 메뉴 - 2 메뉴 - 3 메뉴 - 4 30%할인 ② clear:both 속성을 사용해 수평정렬을 할 수 있다. 오늘의 메뉴 메뉴 - 1 메뉴 - 2 메뉴 - 3 메뉴 - 4 30%할인 2.중앙 정렬 레이아웃 ①중앙 정렬하고 싶은 태그에 width 속성을 부여 한후 margin 속성을 0 auto 로 입력한다. 치킨 치킨(영어: chicken)으로 불리기도 하는 한국의 닭튀김은 토막낸 닭고기에 튀김옷 또는 반죽물을 덮어 기름에 튀겨 만든 음식이다. "치.. 2022. 12. 19. 03-02. 위치 속성 1. 위치 지정 ①position 속성: 요소의 위치 지정 형식을 설정할때 사용한다. ②절대 위치 좌표에는 absolute, fixed 가 있고 상대 위치 좌표에는relative, static 이 있다. absolute - 절대위치 좌표 설정 fixed - 화면을 기준으로 절대위치 좌표설정 relative - 초기 위치에서 상하좌우로 위치 이동 static - 위쪽에서 아래쪽으로 순서대로 배치 (실행 결과는 웹브라우저의 버전 차이에 따라 상자 3개가 모두 보이거나 1개만 보인다고 한다.) ③웹 브라우저에서 출력방식을 통일 하려면 left 속성과 top 속성을 적용하면 된다. ④도형 순서를 변경하려면 z-index 속성을 사용하면 된다. z-index: 숫자 형태이며 숫자가 클수록 앞으로 나온다.(숫자를 .. 2022. 12. 18. 03-01. 글꼴 1. 글자크기 ①font-size: 속성으로 글자 크기를 조절할수 있다. ②html에서 h1태그의 기본크기는 32px이며, p태그의 기본 크기는 16px 이다. loui3 html css3 script html css3 script html css3 script html css3 script html 2. 글꼴 ① font-family: 속성으로 글자 글꼴을 바꿀 수 있다. ② 글꼴 변경시 한단어는 따옴표를 사용 안해도 되지만, 두 단어 이상일 경우 따옴표 사용을 하는게 좋다. ③ 모서리가 뾰족한 글자를 Serif 글꼴, 모서리가 네모진 글자를 Sans-serif 글꼴이라고 한다. ④ 웹페이지를 사용하는 사용자가 글꼴이 없을 수도 있으므로 여러개를 지정하여 쓸수 있다. html css3 script ht.. 2022. 12. 16. 이전 1 2 3 4 5 6 7 다음
