티스토리

키보드와 하루

검색하기

블로그 홈

키보드와 하루

devjhs.tistory.com/m

좋은 블로그 님의 블로그입니다.

구독자: 7

방명록 방문하기

주요 글 목록

[전주 복숭아] 성씨 농원 - 맛있는 복숭아가 자라가는 농원(Ver.2022) 전주 복숭아 성씨 농원 안녕하세요.. 2022년 여름이 다 지나서 이렇게 글을 올리게 되네요 ^^;; 올해에도 어김없이 성씨 농원에서 맛있는 복숭아가 나왔다고 해서 일찍 사진을 찍고 준비를 했었는데 바쁘다는 이유로 글을 올리지 못했습니다 빨리 올렸어야 했는데...ㅠㅠ 그래도 늦게라도 이렇게 글을 올려보게 됩니다. 오늘은 특별히 작년과 다르게 새롭게 시작한 땅에서 나오기 시작한 복숭아를 담아 보았습니다. 이 땅이 5년인가? 6년 전부터 준비를 해왔었고 복숭아도 새로운 품종으로 나오기 시작한 년도라서 여기를 블로깅 하면 좋겠다라는 생각을 하게 되었거든요... 그럼 함께 가보도록 하시죠! 레고 레 고~!!!! 성씨 농원 입구에 들어가다 원래 만나기로 한 시간은 새벽 5시인데 제가 깨지를 못해서 8시에 도착했습.. 공감수 3 댓글수 10 2022. 8. 26.
[갤럭시 폴드4] 구입하기 전까지 망설였던 3가지 - 무게,힌지,실용성 1. 갤럭시 폴드4 사전예약과 구입하게 된 이유 저는 기존까지 폴드 기종을 써 본적이 없습니다. 왜냐하면 아직 완성도에 대한 여러 의심이 들었고 시간이 더 필요하다는 생각 때문이었죠 그 생각에는 이번에도 마찬가지였습니다. 전작인 폴드3에 비해서 엄청나게 발전된 모습보다는 세심하게 많은 부분이 개선되었다고만 들었기 때문입니다. 그러함에도 불구하고 사전예약을 통해 구입하게 된 것은 기존에 잘 쓰던 핸드폰에 있던 액정이 살짝 금이 가서 보기 싫은 것 때문에 바꿔야 할거 같은데 뭔가 새로운 시도를 해보는 것도 좋겠다는 생각 때문에 구입하게 되었습니다. 그래도 폴드4까지 나왔는데 처음 폴드가 나온 것보다는 많이 좋지 않았을까 라는 생각으로요.. 또 남동생은 폴드3를 쓰고 있었는데 남동생도 이번에 폴드4로 바꿀거라.. 공감수 0 댓글수 0 2022. 8. 24.
[python] [요소],del - 리스트의 요소 수정 , 삭제 리스트 수정과 삭제 - 목 차 - 1. [요소] → 지정한 값 통해 수정 2. del → 리스트 요소 제거 1. [요소]= 값 요소를 지정한 후에 값 변경 리스트에서 원하는 위치의 요소 값을 변경하고자 할 경우에는 [요소] = 값 형태로 변경할 수 있습니다. 변경하고자 하는 값이 숫자,문자,리스트 등 자신이 원하는 형태로 변경이 가능합니다. python 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 testList =[ "a" , "b" , "c" ]; testList [ 2 ]= "d" ; print ( testList ); //결과 ['a','b','d'] testList [ 1 ]= 10 ; //결과 ['a',10,'d'] testList [ 1 ]=[ "key" , "board".. 공감수 1 댓글수 0 2022. 6. 23.
[python] 리스트에서 사용될 때 사용법 - +(더함),*(반복),len(개수) 리스트 연산 - 목 차 - 1. + 연산자 → 리스트 더하기 2. * 연산자 → 리스트 반복하기 3. len → 리스트 길이 구하기 1. + 연산자 리스트와 리스트 더해서 표현 리스트에서 + 연산자를 사용하게 되면 일반적으로 사용되는 +연산자와 조금은 다릅니다. 리스트에서 사용하게 되면 두 개 이상의 리스트를 더해서 하나의 새로운 리스트를 만들게 됩니다. 새로운 리스트가 생성이 될 때 들어가는 요소 순서는 더해주는 순서 값에 의해 정해지게 됩니다. python 코드 1 2 3 4 5 6 7 8 9 10 11 testList1 = [ 1 , 2 , 3 ]; testList2 = [ "key" , "board" , "day" ]; testList3 = [ "a" , "b" , "c" ]; print ( te.. 공감수 0 댓글수 0 2022. 6. 22.
[python] list 인덱싱과 슬라이싱 - 요소 값 가져오기 리스트 인덱스&슬라이싱 - 목 차 - 1. 인덱스 →요소값으로 찾아오기 2.슬라이싱 → 첫번째,마지막 값으로 찾아오기 1. 리스트 인덱스 요소에 해당하는 값 찾아오기 리스트라고 하면 값을 묶어 놓은 그룹이라고 생각하시면 됩니다. 하나의 변수 안에 여러개의 값을 담을 수가 없으니 리스트를 지정해 요소1,요소2,요소3.... 이렇게 해서 원하는 값을 담으면 됩니다. 그리고 값을 담았을 때 원하는 요소의 값을 가져오고자 할 경우에 인덱스를 이용하시면 됩니다. 모든 파이썬에서 그렇듯이 시작값은 항상 0으로 시작하게 됩니다. python 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 testList =[ 1 ,.. 공감수 0 댓글수 0 2022. 6. 21.
[python] upper,lower,replace,split - 대소문자 , 바꾸기 , 나누기 문자열 함수2 - 목 차 - 1. upper,lower → 대문자,소문자 바꾸기 2. strip → 공백 제거 3. replace → 문자열 바꾸기 4. split → 문자열 나누기 1. upper,lower 대문자와 소문자 서로 바꾸기 파이썬에서는 영문자를 대문자로 소문자로 바꿀 수가 있습니다. upper는 소문자를 대문자로 바꿉니다. 문자 안에 대문자가 포함되어 있을 경우에는 변화가 없습니다. lower는 반대로 대문자를 소문자로 바꿉니다. python 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 print ( "keyboard" . upper ()); //결과 KEYBOARD print ( "KEYboard" . upper ()); //결과 KEYBOARD print ( ".. 공감수 1 댓글수 0 2022. 6. 17.
[python] count,find,index,join - 개수 , 위치 , 문자 삽입 문자열 함수1 - 목 차 - 1. count → 문자 개수 세기 2.find,index → 위치 찾기 3. join → 문자열 삽입 1. count 문자 개수 세기 count라는 함수는 문자열 내에서 자신이 찾고자 하는 문자의 개수를 알려줍니다. 만약에 문자의 전체의 길이를 알고자 할 경우에는 len이라는 함수를 이용하게 됩니다. count의 경우에는 문자열의 내에서 지정한 문자의 개수를 찾아 숫자로 반환해 줍니다. python 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 print ( "keyboardwithday" . count ( "k" )); //결과 1 print ( "keyboardwithday" . count ( "d" )); //결과 2 pri.. 공감수 0 댓글수 0 2022. 6. 15.
[python] % , format , f문자 - 문자열 포매팅을 선언 문자열 포매팅 - 목 차 - 1. % → 문자열 안에 특정 값 삽입 2.format 함수 → 문자열에 값 삽입을 쉽게 3. f문자열 포매팅 → 3.6버전 이상부터 사용가능 1. % 문자열 특정 영역에 값을 삽입 "나는 올해 29살 입니다" 라는 문자열이 있을 경우에 29라는 숫자만 다른 숫자로 바꿔서 사용하고자 할 경우가 있습니다. 이럴 때 사용되는 것이 포매팅입니다. 포매팅은 위에서 보는 것과 같이 특정한 부분의 영역을 다른 문자나 숫자로 하고자 할 경우에 사용하게 됩니다. 포매팅은 문자열이나 숫자 뿐만 아니라 소수,8진수,16진수 등 다양한 것으로 삽입을 할 수 있습니다. 문자열 포맷 종류 속성 설명 %s 문자열(String) %c 문자 1개(Character) %d 정수(Integber) %f 부동.. 공감수 0 댓글수 0 2022. 6. 14.
[python] [],[:] - 문자열의 위치를 찾는 인덱싱과 슬라이싱 문자의 인덱싱과 슬라이싱 - 목 차 - 1. 인덱싱 → 지정한 위치를 찾아 표현 2.슬라이싱 → 시작위치,끝위치를 찾아 표현 1. 인덱싱 숫자로 지정한 문자의 위치를 찾아 표현 파이썬에서는 다른 언어와 다르게 배열을 선언하지 않고도 배열처럼 문자의 특정한 위치의 값을 가져올 수 있습니다. 양수일 경우에는 앞에서부터 시작해서 가져오고 , 음수일 경우에는 뒤에서부터 시작해서 가져올 수 있습니다. 시작하는 값은 1이 아닌 0부터 시작을 하게 되고 -0일 경우에는 +0과 같기 때문에 뒤에서부터 가져오고자 할 경우에는 -1부터 시작하게 됩니다. python 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 stringValue = "키보드와 하루의 블로그입니다" ; print (st.. 공감수 0 댓글수 0 2022. 6. 10.
[python] +,*,len - 문자열에서 쓰이는 연산자와 함수 문자열을 이용한 사칙연산 - 목 차 - 1. + 연산자 → 문자열을 연결해서 표현 2. * 연산자 → 문자열을 반복해서 표현 3. len → 문자열의 길이 구하기 1. + 연산자 문자와 문자를 연결해서 표현 숫자에서 + 연산자를 사용하면 숫자의 더한 값을 표현하게 되지만 문자열을 + 연산로 표현하게 되면 문자가 연결된 결과값을 반환하게 됩니다. 만약에 숫자형을 담은 변수와 문자형을 담은 변수를 + 연산자를 이용해 더할 경우에는 에러가 발생합니다. python 코드 1 2 3 4 5 6 7 8 9 10 11 valueText1 = "키보드와 " ; valueText2 = "하루" ; print (valueText1 + valueText2); //결과 키보드와 하루 valueText3 = "키보드와 " ; .. 공감수 0 댓글수 0 2022. 6. 9.
[python] ** (제곱), %(나머지) , /(몫) - 숫자형을 이용한 사칙연산 숫자형을 이용한 사칙연산 - 목 차 - 1. ** 연산자 → 제곱의 값을 반환 2. % 연산자 → 나눗셈 후 나머지 값 반환 3. / 연산자 → 나눗셈 후 몫을 반환 1. ** 연산자 제곱을 계산하여 결과값을 반환 파이썬에서는 제곱을 계산하는 연산자로 **을 사용합니다. 두 개의 변수에 각각의 정수형의 값을 담아서 제곱의 값을 구하시면 됩니다. python 코드 1 2 3 4 5 value1 = 5 ; value2 = 3 ; print (value1 ** value2 ); //결과 125 코드설명 5 ** 3 value1 과 value2 라는 변수에 각각에 5와 3을 담고 ** 연산자를 이용하여 제곱근을 구하게 하였습니다. 보통 몇의 몇승이라고 해서 5의 3승이라고 할 수 있는 이 결과값은 125가 나오.. 공감수 0 댓글수 0 2022. 6. 8.
[python] 파이썬 설치 및 실행 파이썬(python) 설치하는 방법 - 목 차 - 1. 다운로드 → 파이썬 다운로드 받기 2. 설치 및 실행 → 운영체제에 맞는 버전 설치 3. 에디터 사용 → 파이썬 IDLE 에디터 1. 다운로드 python download 네이버나 구글과 같은 검색 사이트에서 파이썬이나 python 이라고 검색을 하면 제일 위에 파이썬 공식 홈페이지 정보가 보입니다. 또는 주소창에 https://www.python.org로 접속을 하면 파이썬을 다운받아 설치하실 수 있습니다. 2. 설치 운영체제에 맞는 버전 설치 python 공식 사이트에 가면 Downloads 라는 버튼이 있습니다. 해당 버튼에 마우스를 올려 놓으면 여러 운영체제가 나오는데 그 중에서 자신이 깔고자 하는 운영체제를 선택해 주시면 됩니다. 저는 윈도.. 공감수 0 댓글수 0 2021. 11. 25.
[전주 복숭아] 성씨네 농장(Ver.2021년) - 복숭아가 맛있는 농장입니다! 전주 복숭아 성씨네 농장 안녕하세요.. 정말 오랜만에 성씨네 농장 글을 올리는거 같아요~ 해마다 이 시즌이 되면 글을 올려야지 했는데 여러 이유로 지나쳐 오다가 올해 드디어 글을 올리게 되었습니다!!! 오늘은 특별히 제가 복숭아 따기 일일체험을 했습니다 ㅎㅎㅎ 일일체험이라기 보다는 형이 팔을 다쳐서 조금이나마 도움이 되고자 일을 돕기도 하고 이것저것 사진에 담아 보았습니다. 그럼 시작해볼까요?? 레고 레 고~!!!! 오전 6:15 작업 준비 제가 도착한 시간은 오전 6시 좀 넘어서 도착을 했구요~ 형은 저보다 좀 더 늦게 도착했습니다. 장마철이라 장화와 우비를 챙겨입고 복숭아 밭으로 향했습니다. 수확한 복숭아를 담아오는 기계를 몰고 출발했습니다. 박스는 제가 세어 봤을 때 50개 정도 가지고 갔어요~ 그.. 공감수 12 댓글수 31 2021. 7. 9.
[css3] skew 함수 - 요소 비틀어서 왜곡시키기 1. 개념 skew 함수 - 요소 비틀어서 왜곡시키기 skew 함수는 2차원에서만 사용이 가능하며 해당하는 요소를 정해준 각도만큼 비틀어서 왜곡함 방향은 양쪽이나 한쪽으로 비틀 수 있음 2. 태그 skew html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 키보드와 하루 1 2 3 코드 설명 1 transform : skewX(30deg) skew는 2차원에서만 변형이 가능한 함수 입니다. 그래서 3차원에서는 이 변형 함수는 사용할 수가 없습니다. skew는 해당하는 요소를 비틀어 왜곡을 할 때 사용합니다. 자신이 원하는 만큼의 각도로 비틀고 왜곡하고자 할 때 각도를 입력하게 되고 양의 값을 입력한 각도와 음의 값을 입력한 각도에 따라서 .. 공감수 1 댓글수 0 2021. 6. 24.
[css3] rotate 함수 - 요소 회전시키기 1. 개념 rotate 함수 - 요소 회전시키기 rotate은 2차원이나 3차원에서 웹 요소를 시계 방향이나 반 시계방향으로 회전시킴 이 함수는 2차원,3차원에서 모두 rotate 함수로 사용이 가능하고 추가적으로 3차원에서는 rotate3d , rotateX , rotateY , rotateZ 함수도 사용가능 rotate 함수는 각도(deg)나 레디안 값을 사용 1레디안 = 180도 / π(파이) 2. 태그 rotate html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 키보드와 하루 1 2 3 코드 설명 1 transform : rorate(30deg) 위에서 보면 2차원에 해당하는 요소를 시계방향으로 회전시.. 공감수 0 댓글수 0 2021. 6. 23.
[css3] scale 함수 - 해당요소 확대,축소 1. 개념 scale 함수 - 해당요소 확대,축소 scale은 지정한 크기 만큼 요소를 확대하거나 축소시킴 지정한 크기가 1보다 작으면 원래 이미지 보다 축소되고 1보다 크면 원래 이미지 보다 확대됨 scaleX , scaleY , scaleZ , scale , scale3d 와 같은 함수가 있음 2. 태그 scale html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 키보드와 하루 div { display : inline-block ; } 1 2 3 4 코드 설명 1 transform : scaleX(0.5) scaleX는 해당하는 요소를 지정한 크기 만큼 x축으로 확대하거나 축.. 공감수 0 댓글수 0 2021. 6. 22.
[css3] translate 변형 함수 - 해당하는 요소 이동 1. 개념 translate 변형 함수 - 해당하는 요소 이동 translate는 변형 함수로써 2차원 , 3차원에서 x축 , y축 , z축으로 요소를 이동시키고자 할 경우에 사용 2. 태그 translate html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 키보드와 하루 img { width : 150px ; } 1 2 3 코드 설명 1 transform : translateX(20px) translateX는 해당하는 요소를 지정한 크기만큼 x축 방향으로 이동시킵니다. 위에서 보시는 것처럼 해당하는 그림이 x축으로 30px만큼 이동해 있음을 알 수 있습니다. 이 애니메이션 효과는 보통에 마우스를 올.. 공감수 0 댓글수 0 2021. 6. 21.
[css3] 가상 요소 - ::before , ::after 1. 개념 가상 요소 - ::before , ::after ::before나 ::after를 사용하면 내용의 앞이나 뒤에 텍스트나 이미지를 추가할 수가 있음 2. 태그 ::before , ::after html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 키보드와 하루 1 .sel_before::before { content : "앞에서 표시!" ; color : red ; font-weight : bold ; } 2 .sel_after::after { content : "뒤에서 표시!" ; color : blue ; font-weight : bold ; } 1번 div 2번 div 3번 di.. 공감수 0 댓글수 0 2021. 6. 18.
[css3] 가상 요소 - ::first-line , ::first-letter 1. 개념 가상 요소 - ::first-line , ::first-letter 가상 요소는 내용 중에서 일부만 찾아서 스타일을 적용하고자 할 경우에 사용 ::first-line은 첫 번째 줄에 스타일을 적용하는 것이고 , :: first-letter는 첫번째 글자에 스타일을 적용 2. 태그 ::first-line , ::first-letter html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 키보드와 하루 1 p::first-line { background : blue ; color : #fff ; } 2 p:first-letter { background : red ; } 첫번째.. 공감수 0 댓글수 0 2021. 6. 17.
[css3] 구조 가상 클래스 - :nth-child(n) , :nth-last-child(n) 1. 개념 구조 가상 클래스 - :nth-child(n) , :nth-last-child(n) 하나의 부모 요소를 두고 여러 개의 항목이 나열되어 있을 때 , class나 id 등과 같은 것을 사용하지 않고 몇 번째에 위치하였는지를 보고 스타일을 적용할 때 사용 2. 태그 :nth-child(n) , :nth-last-child(n) html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 키보드와 하루 1 td:nth-child(2) { background : red ; color : #fff ; } 2 td:nth-la.. 공감수 0 댓글수 0 2021. 6. 16.
[css3] 가상 클래스 - :enabled , :disabled , :checked 1. 개념 가상 클래스 - :enabled , :disabled , :checked 사용자의 움직임으로 인한 이벤트에 따른 것 뿐만 아니라 요소 안에서 이루어지는 상태에 따라 스타일을 지정할 수 있음 여기서 자주 사용되는 가상 클래스는 :enabled , :disabled , :checked 이러한 것들이 있음 2. 태그 :enabled , :disabled , :checked html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 키보드와 하루 1 input:enabled { border : 1px solid blue ; } 2 input:disabled { border : 1px .. 공감수 0 댓글수 0 2021. 6. 15.
[css3] 가상 클래스 - :link , :visited , :hover , :active , :focus 1. 개념 가상 클래스 - :link , :visited , :hover , :active , :focus 어떠한 요소를 클릭하거나 마우스 커서를 올리거나 내리기와 같이 특정한 동작이 이루어질 때 스타일이 바뀌도록 만들어 주는 것을 가상 클래스라고 함 그 중에서 자주 사용되는 가상 클래스는 :link , :visited , :hover , :active , :focus 이러한 것들이 있음 2. 태그 가상 클래스 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 키보드와 하루 1 a:link { background : yellow ;.. 공감수 1 댓글수 0 2021. 6. 11.
[css3] [속성 *=값] 선택자 - 특정 값이 일치하는 속성에 스타일 적용 1. 개념 [속성 *=값] 선택자 - 특정 값이 일치하는 속성에 스타일 적용 *는 자신이 스타일을 주고자 하는 속성 값을 찾아서 위치에 상관없이 일치하는 값이 있을 경우에 스타일을 적용함 2. 태그 [속성 *=값] 선택자 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 키보드와 하루 1 [class *="j"] { background : red ; color : #fff ; } testjava 클래스를 사용한 요소 testscript 클래스를 사용한 요소 testjsp 클래스를 사용한 요소 결과 화면 코드 설명 [class *="...."] 앞에서 살펴본 속성 선택자를 본다고 하면 값이 일치하거나 앞에서 시작하거나 뒤에서 시작하는.. 공감수 0 댓글수 0 2021. 6. 10.
[css3] [속성 $=값] 선택자 - 특정 값으로 끝나는 속성에 스타일 적용 1. 개념 [속성 $=값] 선택자 - 특정 값으로 끝나는 속성에 스타일 적용 ^는 속성에서 시작하는 문자열을 찾아서 스타일을 적용했다면 $는 ^과는 반대로 끝나는 값이 일치하는 것을 찾아서 스타일을 적용함 2. 태그 [속성 $=값] 선택자 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 키보드와 하루 1 [class $="pdf"] { font-size : 20px ; } 2 [class $="hwp"] { font-size : 30px ; } 3 [class $="xls"] { font-size : 40px ; } pdf에 적용하고 싶은 클래스 hwp에 적용하고 싶은 클래스 xls에 적.. 공감수 0 댓글수 0 2021. 6. 9.
[css3] [속성 ^=값] 선택자 - 특정 값으로 시작하는 속성에 스타일 적용 1. 개념 [속성 ^=값] 선택자 - 특정 값으로 시작하는 속성에 스타일 적용 ^을 사용하게 되면 자신이 입력하기 시작한 값에 스타일을 적용함 2. 태그 [속성 ^=값] 선택자 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 키보드와 하루 1 [class ^="a"] { background : red ; color : white ; } 2 [class ^="b"] { background : yellow ; } 3 [class ^="c"] { background : blue ; color : white ; } a로 시작하는 클래스 b로 시작하는 클래스 c로 시작하는 클래스 결과 .. 공감수 0 댓글수 0 2021. 6. 8.
[css3] 속성 |=값] 선택자 - 특정 값(하이픈 포함)이 포함될 경우 스타일 적용 1. 개념 [속성 |=값] 선택자 - 특정 값(하이픈 포함)이 포함될 경우 스타일 적용 |을 사용한 속성 선택자는 ~를 사용한 속성 선택자와 같이 특정한 값이 포함되어 있을 경우에 스타일을 적용함 |과 ~를 사용했을 때 차이점이 있다고 하면 ~를 사용하면 포함된 단어에 하이픈이 있으면 스타일을 적용하지 않지만 |는 중간에 하이픈이 있어도 스타일을 적용하게 됨 즉 하이픈이 있는지와 없는지에 따라 스타일을 적용 여부가 차이가 있음 2. 태그 [속성 |=값] 선택자 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 키보드와 하루 1 [class !="test"] { background : #000 ;.. 공감수 0 댓글수 0 2021. 6. 7.
[css3] [속성 ~=값] 선택자 - 특정 값이 포함될 경우 스타일 적용 1. 개념 [속성 ~=값] 선택자 - 특정 값이 포함될 경우 스타일 적용 태그에서 클래스 속성을 이용할 경우에는 한개가 아닌 여러개의 클래스를 붙일 수 있음 이러한 경우 특정한 값이 포함되어 있을 경우에 스타일을 적용하기 위해 물결(~) 표시를 사용하여 스타일을 적용할 수 있음 2. 태그 [속성 ~=값] 선택자 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 키보드와 하루 1 [class ~="link"] { background : blue ; color : white ; } test 클래스 속성 test , link 클래스 속성 test , link , button 클래스 속성 결과 화면 코드 설명 1 [class ~="link.. 공감수 0 댓글수 0 2021. 6. 4.
[css3] [속성 =값] 선택자 - 특정한 값을 지닌 속성에 스타일 적용 1. 개념 [속성 =값] 선택자 - 특정한 값을 지닌 속성에 스타일 적용 속성이 있는지에 대한 것보다 한단계 나아가 속성과 해당하는 속성의 값이 정확하게 일치하는 것에만 스타일을 적용하고자 할 경우에 사용 이때에도 스타일에 대괄호([ ]) 안에 속성과 속성 값을 넣고 사용하면 됨 2. 태그 [속성 =값] 선택자 html5 코드 123456789101112131415161718192021 키보드와 하루 1 a[target = "_blank"] { background : yellow ; } blank을 가진 target 속성 self을 가진 target 속성 첫번째 self을 가진 target 속성 두번째 결과 화면 코드 설명 1 a[taget="_blank"] 앞에서는 속성 선택자라고 해서 해당하는 속성이.. 공감수 0 댓글수 0 2021. 6. 3.
[css3] 속성 선택자 - 지정한 속성에 스타일 적용 1. 개념 속성 선택자 - 지정한 속성에 스타일 적용 특정한 속성을 사용한 요소를 찾아 스타일을 적용하는 속성으로 스타일을 적용하고자 할 경우에는 스타일에서 대괄호([ ]) 안에 찾으려는 속성을 지정하여 사용 2. 태그 속성 선택자 html5 코드 123456789101112131415161718192021 키보드와 하루 1 a[href] { background : yellow ; } 첫번째 메뉴 두번째 메뉴 세번째 메뉴 결과 화면 코드 설명 1 a[href] 스타일을 적용할 때 아이디나 클래스 뿐만 아니라 태그를 가져와서 적용할 수도 있고 오늘에서 본 것처럼 태그 안에 있는 속성을 가지고 스타일을 적용할 수가 있습니다. 지금 보시는 것처럼 a 라는 태그로 메뉴를 3개 지정하였습니다. 다른 점이 있다면 .. 공감수 0 댓글수 0 2021. 6. 2.
[css3] 형제 선택자(~) - 지정한 모든 형제 요소에 스타일 적용 1. 개념 형제 선택자(~) - 지정한 모든 형제 요소에 스타일 적용 하나의 부모 요소에서 형과 동생으로 같은 레벨에 형제 요소를 이루게 될 때 +기호는 동생 요소 중 제일 처음으로 오는 요소에만 스타일이 적용이 되지만 ~ 기호를 사용하면 동생 요소에 오는 모든 요소에 스타일을 적용할 수 있음 2. 태그 형제 선택자(~) html5 코드 12345678910111213141516171819202122 키보드와 하루 1 h1 ~ div { color : red ; } 키보드와 하루(형제 선택자) 첫번째 div 요소 두번째 div 요소 세번째 div 요소 결과 화면 코드 설명 1 h1 ~ div + 기호를 사용해서 첫번째 요소와 나머지 요소를 연결할 경우에는 나머지 처음에만 스타일이 적용되는 것을 알 수 있.. 공감수 0 댓글수 0 2021. 6. 1.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.